Erkunden der Eigenschaften des CSS-Textausschnitts: Textüberlauf und Überlauf

Erkundung der CSS-Textbeschneidungseigenschaften: Textüberlauf und Überlauf

Einführung:
In der Webentwicklung stoßen wir häufig auf Situationen, in denen Text beschnitten werden muss. CSS bietet mehrere Möglichkeiten zum Ausschneiden von Text, einschließlich der Eigenschaften text-overflow und overflow. In diesem Artikel werden beide Eigenschaften untersucht und konkrete Codebeispiele bereitgestellt.

1. Textüberlaufattribut

1. textüberlauf: Clip
   Wenn der Text über die Grenze des Containers hinausgeht, wird er automatisch abgeschnitten und nicht außerhalb des Containers angezeigt.

Beispiel:

<style>
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
</style>


<div class="container">
  这是一个超长的文本内容，当超出容器宽度时会被裁剪掉。
</div>

2. text-overflow: ellipsis
   Wenn der Text über die Containergrenze hinausgeht, werden Ellipsen verwendet, um den zugeschnittenen Teil anzuzeigen.

Beispiel:

<style>
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>


<div class="container">
  这是一个超长的文本内容，当超出容器宽度时会被用省略号表示。
</div>

2. Überlaufattribut

1. Überlauf: ausgeblendet
   Wenn der Inhalt über die Containergrenze hinausgeht, wird er abgeschnitten und nicht außerhalb des Containers angezeigt.

Beispiel:

<style>
.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}
</style>


<div class="container">
  <p>这是一个超长的文本内容，当超出容器宽度时会被裁剪掉。</p>
</div>

2. overflow: scroll
   Wenn der Inhalt die Containergrenze überschreitet, wird eine Bildlaufleiste hinzugefügt, um den zugeschnittenen Teil anzuzeigen, und der Benutzer kann die Bildlaufleiste verwenden, um den gesamten Inhalt anzuzeigen.

Beispiel:

<style>
.container {
  width: 200px;
  height: 100px;
  overflow: scroll;
}
</style>


<div class="container">
  <p>这是一个超长的文本内容，当超出容器宽度时会增加滚动条。</p>
</div>

Schlussfolgerung: Das Attribut
text-overflow wird verwendet, um die Zuschneidemethode zu steuern, wenn der Text den Container überläuft. Der Clip kann den Überlaufteil direkt zuschneiden, und Auslassungspunkte verwenden Auslassungspunkte, um den Überlaufteil anzuzeigen. Das Überlaufattribut kann das Überlaufverhalten des Containers steuern, versteckt kann den Überlaufteil abschneiden und Scroll fügt Bildlaufleisten hinzu, um den Inhalt anzuzeigen. In tatsächlichen Projekten können Sie entsprechend Ihren Anforderungen geeignete Attribute auswählen, um den Effekt des Textzuschneidens zu erzielen.

Obwohl Textüberlauf und Überlaufeigenschaften beide Funktionen zum Zuschneiden von Text bieten, sind ihre anwendbaren Szenarien unterschiedlich. text-overflow eignet sich zum Zuschneiden einzelner Textzeilen, während overflow zum Zuschneiden von mehrzeiligem Text geeignet ist.

Ich hoffe, dieser Artikel hilft Ihnen, Textüberlauf und Überlaufeigenschaften zu verstehen und anzuwenden.

Das obige ist der detaillierte Inhalt vonErkunden der Eigenschaften des CSS-Textausschnitts: Textüberlauf und Überlauf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!