So setzen Sie den Text in CSS auf eine Zeile

So legen Sie eine Textzeile in CSS fest: 1. Legen Sie den Stil „display: inline-block;“ für das Textelement fest, um es in ein Inline-Blockelement umzuwandeln. 2. Geben Sie dem Textelement den Stil „white-space:“ nowrap;“, um den Text zu implementieren. Erzwinge keine Zeilenumbrüche.

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

CSS Stellen Sie den Text so ein, dass nur eine Zeile und die zusätzlichen Ellipsen angezeigt werden.

CSS Stellen Sie den Text so ein, dass nur eine Zeile angezeigt wird

display-Attribut Ja Es bestimmt die Leistung des Elements im Fluid-Layout (Blockebene oder Inline-Element);

display: block; bedeutet, dass dieses Element ein ist Element auf Blockebene wird vertikal angezeigt und die Breite wird automatisch ausgefüllt. Sie können die Breite und Höhe festlegen.

display: inline; bedeutet, dass dieses Element ein Inline-Element ist, nebeneinander angezeigt wird, die Breite automatisch verkleinert wird und Breite und Höhe nicht eingestellt werden können.

• display: block;表示这个元素是块级元素，垂直显示，宽度自动撑满，可以设置宽高。

• display: inline;表示这个元素是内联元素，并排显示，宽度自动收缩，不能设置宽高。

• display:inline-block;表示这个元素是内联块，既可以设置宽高又可以并排显示。

white-space属性

white-space属性指定元素内的空白怎样处理。

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

overflow属性

overflow属性指定如果内容溢出一个元素的框，会发生什么。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

text-overflow属性

text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串（不是所有浏览器都支持）。

值	描述
clip	剪切文本。
ellipsis	显示省略符号 ... 来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

text-overflow 需要配合以下两个属性使用：

• white-space: nowrap;

• overflow: hidden;display:inline-block; bedeutet, dass dieses Element ein Inline-Block ist, der die Breite und Höhe festlegen und nebeneinander anzeigen kann.

White-Space-Attribut

🎜Das White-Space-Attribut gibt an, wie mit Leerzeichen innerhalb des Elements umgegangen wird. 🎜

Wert	Beschreibung
normal	Standard. Leerzeichen werden vom Browser ignoriert.
pre	Leerzeichen werden vom Browser beibehalten. Es verhält sich wie das -Tag in HTML.
nowrap	Der Text wird nicht umgebrochen. Der Text wird in derselben Zeile fortgesetzt, bis das -Tag gefunden wird.
pre-wrap	Behält Leerzeichensequenzen bei, wird aber normal umbrochen.
pre-line	Kombiniert Leerzeichensequenzen, behält aber Zeilenumbrüche bei.
inherit	Gibt an, dass der Wert des Leerraumattributs vom übergeordneten Element geerbt werden soll.

🎜🎜Überlaufeigenschaft🎜🎜🎜Die Überlaufeigenschaft gibt an, was passiert, wenn Inhalt die Box eines Elements überläuft. 🎜

Wert	Beschreibung
sichtbar	Standardwert. Der Inhalt wird nicht beschnitten und außerhalb der Elementbox gerendert.
versteckt	Der Inhalt wird gekürzt und der verbleibende Inhalt wird unsichtbar sein.
scrollen	Der Inhalt wird gekürzt, aber der Browser zeigt Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.
auto	Wenn Inhalte zugeschnitten werden, zeigt der Browser Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.

🎜🎜text-overflow-Attribut🎜🎜🎜 Das text-overflow-Attribut gibt an, wie Text angezeigt werden soll, wenn er das Element überläuft, das ihn enthält. Nach dem Überlauf können Sie festlegen, dass der Text ausgeschnitten wird, Auslassungspunkte (...) oder eine benutzerdefinierte Zeichenfolge angezeigt werden (nicht von allen Browsern unterstützt). 🎜

Wert	Beschreibung
Clip	Text ausschneiden.
Auslassungspunkte	Zeigen Sie das Auslassungszeichen ...🎜 an, um zugeschnittenen Text darzustellen.
string	Verwenden Sie den angegebenen String, um den zugeschnittenen Text darzustellen.

🎜text-overflow muss mit den folgenden zwei Attributen verwendet werden: 🎜🎜🎜🎜white-space: nowrap;🎜🎜🎜 🎜overflow: versteckt;🎜🎜🎜🎜【Empfohlen: 🎜CSS-Video-Tutorial🎜】🎜

Das obige ist der detaillierte Inhalt vonSo setzen Sie den Text in CSS auf eine Zeile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!