Heim > Web-Frontend > CSS-Tutorial > So verwenden Sie das Textüberlauf-Attribut

So verwenden Sie das Textüberlauf-Attribut

青灯夜游
Freigeben: 2019-02-12 10:12:58
Original
3911 Leute haben es durchsucht

Das text-overflow-Attribut wird verwendet, um anzugeben, was passieren soll, wenn Text das ihn enthaltende Element überläuft.

So verwenden Sie das Textüberlauf-Attribut

CSS3-Textüberlaufeigenschaft

Funktion: Textüberlaufeigenschaft Gibt an, was passiert, wenn Text das enthaltende Element überläuft.

Syntax:

text-overflow: clip|ellipsis|string;
Nach dem Login kopieren

clip: Text zuschneiden.

Ellipse: Zeigt Ellipsen an, um zugeschnittenen Text darzustellen.

Zeichenfolge: Verwenden Sie die angegebene Zeichenfolge, um den zugeschnittenen Text darzustellen.

Hinweis: Alle gängigen Browser unterstützen das Textüberlaufattribut.

Beispiel für die Verwendung des CSS3-Textüberlaufattributs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}
div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
</style>
</head>
<body>
<p>将鼠标移动到框内,查看效果.</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>
Nach dem Login kopieren

Rendering:

So verwenden Sie das Textüberlauf-Attribut

Referenz für diesen Artikel:https://www.html.cn/book/css/properties/user-interface/text-overflow.htm

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Textüberlauf-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage