In Bezug auf die Ellipsen, die angezeigt werden, wenn mehrzeiliger CSS-Text überläuft-CSS-Tutorial-php.cn

In Bezug auf die Ellipsen, die angezeigt werden, wenn mehrzeiliger CSS-Text überläuft

不言

Freigeben： 2018-06-14 10:39:36

Original

1924 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen zu Beispielen für das Auftreten von Ellipsen vorgestellt, die beim Überlaufen von mehrzeiligem CSS-Text auftreten. Der Inhalt ist recht gut und dient als Referenz.

Elipsen erscheinen, wenn mehrzeiliger Text überläuft

In diesem Artikel werden zwei Methoden empfohlen.

1. CSS

Tipp: Nur kompatibel mit Browsern mit Chrome-Kernel. ff wird nicht unterstützt.

.box {
    overflow: hidden; /* 溢出时不显示溢出的内容 */
    text-overflow: ellipsis; /* 发生溢出时使用省略号代替 */
    display: -webkit-box; /* chrome浏览器的私有属性。显示为box。 */
    -webkit-box-orient: vertical; /* 垂直排列元素 */
    -webkit-line-clamp: 2; /* 显示多少行 */
}

Nach dem Login kopieren

Erweiterung

Zeilenumbruch

关键字	描述	默认值	值
word-wrap	规定单词换行的条件	normal, 在单词断字点处换行。	break-word，在单词内换行。
overflow-wrap,在css3时由word-wrap改为overflow-wrap

Textüberlauf

关键字	描述	默认值	值
test-overflow	超出盒子的文本如何显示		clip, 修剪文本。 ellipsis, 显示省略号。 string, 显示指定的文本。

Leerzeichen

关键字	描述	默认值	值
white-space	对待空白的方法和是否换行	normal，空白会被浏览器忽略。	pre, 保留空白。nowrap, 文本不换行。pre-wrap, 保留空白，正常换行。pre-line，合并空白，保留换行。

box-orient

Dieses Attribut wird von Browsern noch nicht unterstützt. Sie müssen die privaten Eigenschaften der jeweiligen Browser nutzen.

关键字	描述	默认值	值
box-orient	子元素如何排序	inline-axis，子元素沿着内联坐标轴（映射到横向）。	horizontal, 指定子元素在一个水平线上从左到右排列。vertical, 从顶部向底部垂直排列子元素。block-axis, 子元素沿着块坐标轴（映射到垂直）。inherit，继承父元素。

line-clamp

Nur Browser mit Chrome Core unterstützen ihre eigenen privaten Eigenschaften.

Wie viele Zeilen von Elementen auf Blockebene werden angezeigt?

2. js

Es gibt viele Möglichkeiten, mit js zu steuern, wie Überlauftext angezeigt wird. Hier ist eine empfohlene Skriptdatei: ellipsis.js

ellipsis.js

名称	链接
ellipsis 链接	https://www.jsdelivr.com/package/npm/ellipsis.js
ellipsis	https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js
ellipsis git	https://github.com/glinford/ellipsis.js

So verwenden Sie sie.

1. Stellen Sie die Skriptdatei vor

<script src="https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js"></script>

Nach dem Login kopieren

2. Verwenden Sie

var ell = Ellipsis({
    lines: 3
})
var ele = document.getElementsByClassName(&#39;test&#39;)
ell.add(ele)

Nach dem Login kopieren

Erweiterung

Es gibt auch einige Konfigurationselemente. Wenn nicht konfiguriert, wird der Standardwert verwendet.

rrree

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Bitte achten Sie auf PHP Chinesische Website!

Verwandte Empfehlungen:

Über die Verwendung des Größer-als-Zeichens in CSS-Stilen und Vererbungsmethoden in CSS

Das obige ist der detaillierte Inhalt vonIn Bezug auf die Ellipsen, die angezeigt werden, wenn mehrzeiliger CSS-Text überläuft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!