So legen Sie einen Überlauf und keinen Zeilenumbruch in CSS fest-Front-End-Fragen und Antworten-php.cn

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

藏色散人

Freigeben： 2021-07-19 16:39:34

Original

5102 Leute haben es durchsucht

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

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

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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!