Heim > Artikel > Web-Frontend > 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.
| 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. |
| 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. |
| 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. |
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!