Warum funktioniert „overflow:hidden' bei einem Element nicht und wie kann ich das Problem beheben?

Warum Overflow: Hidden in einem nicht funktioniert

Overflow: Hidden wird häufig verwendet, um überlaufenden Inhalt innerhalb eines Elements auszublenden. Bei Anwendung auf ein Element funktioniert es möglicherweise nicht wie erwartet, was zur Erweiterung der Zelle statt zum Abschneiden des Textes führt.

Um dieses Problem zu beheben, sind zwei zusätzliche CSS-Eigenschaften erforderlich:

• Tabellenlayout: fest – Diese Eigenschaft stellt sicher, dass die Tabelle eine feste Breite hat und einzelne Zellen nicht darüber hinauswachsen it.
• white-space: nowrap – Diese Eigenschaft verhindert, dass der Text über mehrere Zeilen umbricht, und stellt so sicher, dass er innerhalb der angegebenen Zellenbreite bleibt.

Beispiel:

Berücksichtigen Sie das folgende HTML und CSS Ausschnitte:

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

* {
  box-sizing: border-box;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}

td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

In diesem Beispiel hat das Tabellenelement eine feste maximale Breite von 100 Pixel und das Das Element hat eine Breite von 100 Pixel. Der Text innerhalb der Zelle wird nun über die angegebene Breite hinaus ausgeblendet.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „overflow:hidden' bei einem Element nicht und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!