So legen Sie einen Überlauf und keinen Zeilenumbruch in CSS fest

So legen Sie einen Überlauf und keine Zeilenumbrüche in CSS fest: Erstellen Sie zunächst eine HTML-Beispieldatei Zeilenumbrucheffekt.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Wie stelle ich einen Überlauf und keinen Zeilenumbruch in CSS ein?

CSS-Textüberlauf wird nicht umbrochen, Ellipsen werden angezeigt.

Einzelzeilige Textüberläufe.

div{
width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap;
}

Attribute, diese Methode gilt für WebKit-Browser und mobile Endgeräte.

Hinweis:

1.-webkit-line-clamp wird verwendet, um die Anzahl der in einem Blockelement angezeigten Textzeilen zu begrenzen. Um diesen Effekt zu erzielen, muss es mit anderen WebKit-Eigenschaften kombiniert werden. Häufig kombinierte Eigenschaften:

2.display: -webkit-box muss kombiniert werden, um das Objekt als flexibles Boxmodell anzuzeigen.

3.-webkit-box-orient muss mit dem Attribut kombiniert werden, um die Anordnung der untergeordneten Elemente des Flex-Box-Objekts festzulegen oder abzurufen.

div{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;
}

Noch kein Webkit-Browser~~

Empfohlenes Lernen: „

CSS-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo legen Sie einen Überlauf und keinen Zeilenumbruch in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!