Zusammenfassung der Textüberlaufeigenschaft in CSS

Syntax:
text-overflow: Auslassungspunkte
Parameter:
Auslassungszeichen (...) nicht anzeigen, sondern einfach
Auslassungspunkte zuschneiden : Zeigt ein Ellipsenzeichen (...) an, wenn der Text im Objekt überläuft.
Beschreibung:
Legen Sie fest oder rufen Sie ab, ob ein Ellipsenzeichen (...) verwendet werden soll, um den Überlauf des Texts im Objekt zu markieren.
Die entsprechende Skriptfunktion ist textOverflow. Bitte sehen Sie sich andere Bücher an, die ich geschrieben habe.

Beispiel:

div { text-overflow : clip; }

So erzielen Sie den Textüberlaufeffekt in CSS2.1

Sehen Sie, es sieht gut aus, testen wir es

<div style="width:100px;height:20px;text-overflow:ellipsis; ">a b c d e f g h i j k l , msa sd sd sa w df f </div> 
<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">a b c d e f g h i j k l , msa sd sd sa w df f </div>

Zu diesem Zeitpunkt ist die Anzeige normal
Das Textüberlaufattribut ist nur eine Anmerkung, ob das Auslassungszeichen angezeigt werden soll Text läuft über. Es gibt keine weiteren Stilattributdefinitionen. Wir möchten den Effekt erzielen, dass beim Überlauf eine Ellipse entsteht. Sie müssen außerdem Folgendes definieren: Erzwingen Sie die Anzeige von Text in einer Zeile (white-space:nowrap) und das Ausblenden von Überlaufinhalten (overflow:hidden). Nur so kann der Effekt der Anzeige von Ellipsen im Überlauftext erzielt werden.
1. Nur die Definition von text-overflow:ellipsis; kann den Auslassungseffekt nicht erzielen.
2. Definieren Sie text-overflow:ellipsis;white-space:nowrap; was auch den Ellipseneffekt erreichen kann
3 Folgen Sie dem Tutorial von 52css.com und wenden Sie Folgendes an: text-overflow:ellipsis ; white-space:nowrap; overflow:hidden; erreicht den gewünschten Ellipseneffekt für die Überlauftextanzeige:

div passt sich automatisch der Breite an und verwendet den Text -Überlaufinstanz

<style> 
#all{ 
float:center; 
text-align:left; 
overflow: hidden;
} 
#a{ 
float:left; 
text-align:left; 
width:100px;height:50px; 
border:1px solid black; 
text-overflow:ellipsis; 
white-space:nowrap; 
padding-bottom: 10000px;margin-bottom: -10000px;
} 
#b{ 
float:left; 
width:40px;height:50px; 
border:1px solid black;
padding-bottom: 10000px;margin-bottom: -10000px; 
} 
</style>

Das obige ist der detaillierte Inhalt vonZusammenfassung der Textüberlaufeigenschaft in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!