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; /* 显示多少行 */
}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>
2. Verwenden Sie
var ell = Ellipsis({
lines: 3
})
var ele = document.getElementsByClassName('test')
ell.add(ele)
Erweiterung
Es gibt auch einige Konfigurationselemente. Wenn nicht konfiguriert, wird der Standardwert verwendet.
rrreeDas 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!
