Textüberlauf [einzeiliger und mehrzeiliger Textüberlauf]

Einzeilige Textüberlaufmethode:

Methode eins:

Auslassungspunkte anzeigen (Auslassungspunkte): Wenn eine einzelne Textzeile überläuft, werden Auslassungspunkte angezeigt, um anzuzeigen, dass sie abgeschnitten ist. Die spezifische Implementierungsmethode besteht darin, Textüberlauf: Auslassungspunkte festzulegen und außerdem die Attribute Leerraum und Überlauf festzulegen.

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

Methode Zwei:

Zeichenfolge (Zeichenfolge) anzeigen: Wenn der einzeilige Text überläuft, wird die angegebene Zeichenfolge angezeigt. Die spezifische Implementierungsmethode besteht darin, text-overflow: string festzulegen und gleichzeitig das Inhaltsattribut festzulegen.

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: clip; /* 剪切 */
}

.text::after {
  content: "..."; /* 溢出时显示... */
}

Methode drei:

Kein Zeilenumbruch (Clip): Wenn ein einzeiliger Text überläuft, wird der überschüssige Teil direkt abgeschnitten. Die spezifische Implementierungsmethode besteht darin, Textüberlauf: Clip festzulegen und außerdem die Attribute Leerraum und Überlauf festzulegen.

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: clip; /* 剪切 */
}

Mehrzeiliger Textüberlauf:

Methode eins:

Auslassungspunkte anzeigen (Auslassungspunkte): Wenn mehrzeiliger Text überläuft, werden Auslassungspunkte angezeigt, um anzuzeigen, dass er abgeschnitten ist. Die spezifische Implementierungsmethode besteht darin, display: -webkit-box, -webkit-box-orient: Vertical festzulegen und außerdem die Eigenschaften overflow und text-overflow festzulegen.

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制行数 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

Methode Zwei:

Verwenden Sie JavaScript, um den Überlauf von mehrzeiligem Text zu verarbeiten: In der tatsächlichen Entwicklung können wir auch JavaScript verwenden, um den Überlauf von mehrzeiligem Text zu verarbeiten. Zu den bekannteren Bibliotheken gehören line-clamp.js und clamp.js.

<div class="text" id="text">
  一段多行文本，需要进行溢出处理...
</div>

<script src="https://unpkg.com/clamp-js/dist/clamp.min.js"></script>
<script>
  clamp(document.getElementById('text'), { clamp: 3 });
</script>