Heim > Artikel > Web-Frontend > Lösung für Ellipsen in CSS-Teilen über 2 Zeilen hinaus

Lösung für Ellipsen in CSS-Teilen über 2 Zeilen hinaus

高洛峰Original: 2017-03-16 09:56:202487Durchsuche

Ich bin heute auf dieses Problem gestoßen, als ich an etwas gearbeitet habe. Ich habe es auf Baidu zusammengefasst und dieses Ergebnis erhalten.

Zunächst müssen Sie die drei Attribute von CSS kennen.

overflow:hidden; //Der überschüssige Text wird ausgeblendet

text-overflow:ellipsis; //Overflow wird mit Ellipsen angezeigt

white-space:nowrap; //Kein Zeilenumbruch bei Überlauf

Diese drei sind die grundlegenden Eigenschaften von CSS und müssen beachtet werden.

Aber das dritte Attribut kann nur eine Zeile anzeigen und kann hier nicht verwendet werden. Was ist, wenn mehrere Zeilen angezeigt werden?

css3 löst dieses Problem:

display:-webkit-box; //Replace objectDargestellt als flexibel skalierbares Box-Modell.

-webkit-box-orient:vertical; //Untergeordnete Elemente vertikal von oben nach unten anordnen (Anordnung der untergeordneten Elemente der einziehbaren Box festlegen)

-webkit-line-clamp: 2; //Dieses Attribut ist kein Standardattribut von CSS. Es muss die beiden oben genannten Attribute kombinieren, um die Anzahl der angezeigten Zeilen anzugeben.

Der endgültige CSS-Stil lautet wie folgt:

overflow:hidden;

text-overflow:ellipsis;

display: -webkit -box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

Wenn es zweizeilig oder dreizeilig ist -line-Container, denken Sie, es gibt keine Möglichkeit, diese Methode nur mit CSS zu implementieren.

kann zwei Methoden bereitstellen: Eine besteht darin, das Programm zum Abschneiden der Wörter bei der Ausgabe zu verwenden, die andere darin, js zu verwenden, um die Wortanzahl zu beurteilen und abzuschneiden.

Die Demo von JS lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 
<title>Examples</title>
<style type="text/css">
.demo{width:100px;}
</style>
</head>
<body>
<div class="demo" id="demo">怎么显示两行或三行文字，然后多出的部分省略号代替?</div>
<script>
// js无法直接通过class获取对象，必须自己写一个方法,这样效率会非常低，原生js里最好用id获取，
// 直接用id获取domo对象
var oBox=document.getElementById(&#39;demo&#39;);
// slice() 方法可从已有的数组中返回选定的元素。
// 您可使用负值从数组的尾部选取元素。
// 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
// 此处需要根据需求自行修改slice()的值，以达到要显示的内容
var demoHtml = oBox.innerHTML.slice(0,10)+&#39;...&#39;;
// 填充至指定位置
oBox.innerHTML = demoHtml;
</script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonLösung für Ellipsen in CSS-Teilen über 2 Zeilen hinaus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Unterschiede und Verwendung der vier Werte des Positionsattributs: statisch, fest, relativ, absolutNächster Artikel：Detaillierte Erläuterung der Unterschiede und Verwendung der vier Werte des Positionsattributs: statisch, fest, relativ, absolut

In Verbindung stehende Artikel

Mehr sehen