Heim > Artikel > Web-Frontend > Problem mit Ellipsen in einzeiligem CSS-Text und mehrzeiligem Überlauftext

Problem mit Ellipsen in einzeiligem CSS-Text und mehrzeiligem Überlauftext

WBOYOriginal: 2016-09-22 08:42:141088Durchsuche

Während des Textlayouts und des Codeschreibprozesses kommt es häufig zu Textüberläufen. Im Folgenden wird die Verarbeitung von einzeiligen Textüberläufen und mehrzeiligen Textüberläufen zusammengefasst.

1. Auslassungspunkte für einzeiligen Text

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text1"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #000000;">    这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</span><span style="color: #008080;">3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">.text1</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> nowrap</span>;<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;
}

Hier ist ein einfaches Textbeispiel für einen einzeiligen Textüberlauf:

Das Breitenattribut ist hier erforderlich, da Sie seine Breite kennen müssen, um den Überlauf zu bestimmen

Das Überlaufattribut wird verwendet, um überlaufenden Text auszublenden

Leerzeichen:

Textüberlauf:

值

描述

normal

默认。空白会被浏览器忽略。

pre

空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。</td>
</tr>
<tr>
<td>nowrap</td>
<td>文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。</td>
</tr>
<tr>
<td>pre-wrap</td>
<td>保留空白符序列，但是正常地进行换行。</td>
</tr>
<tr>
<td>pre-line</td>
<td>合并空白符序列，但是保留换行符。</td>
</tr>
<tr>
<td>inherit</td>
<td>规定应该从父元素继承 white-space 属性的值。</td>
</tr>
</tbody>
</table>
<p>
</p>Zwei. Auslassungspunkte für mehrzeiligen Text <table class="reference">
<tbody>
<tr>
<th>值</th>
<th>描述</th>
</tr>
<tr>
<td>clip</td>
<td>修剪文本。</td>
</tr>
<tr>
<td>ellipsis</td>
<td>显示省略符号来代表被修剪的文本。</td>
</tr>
<tr>
<td><em>string</em></td>
<td>使用给定的字符串来代表被修剪的文本。</td>
</tr>
</tbody>
</table>
<p>
</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text2"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #000000;">    这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</span><span style="color: #008080;">3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">.text2</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">53px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
    -webkit-line-clamp</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;
}

Ich werde hier nicht mehr zu dem sagen, was ich oben gesagt habe.

Das Höhenattribut und das Überlaufattribut werden hier kombiniert, um den Text unter den Auslassungspunkten auszublenden. Sie können den Effekt ausprobieren, ohne ihn hinzuzufügen, und er wird auf einen Blick klar sein.

Mit dem Zeilenklammerattribut wird gesteuert, wie viele Textzeilen angezeigt werden.

Über Display und Box-Orient sprechen wir hier kurz:

Hinweis: Das Anzeigeattribut muss definiert werden, bevor die Box geteilt werden kann.

Das box-orient-Attribut gibt an, ob ein untergeordnetes Boxelement horizontal oder vertikal angeordnet werden soll.

Wenn Sie es immer noch nicht verstehen, können Sie die URL besuchen: http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/ oder sich die verschiedenen CSS-Attribute in w3c ansehen.

值	说明
horizontal	指定子元素在一个水平线上从左至右排列
vertical	从顶部向底部垂直布置子元素
inline-axis	子元素沿着内联坐标轴（映射到横向）
block-axis	子元素沿着块坐标轴（映射到垂直）
inherit	box-orient 属性的值应该从父元素继承

Stellungnahme：

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

Vorheriger Artikel：Lassen Sie uns über einige interessante CSS-Themen sprechen (1) – So implementieren Sie die vertikale Leiste auf der linken SeiteNächster Artikel：Lassen Sie uns über einige interessante CSS-Themen sprechen (1) – So implementieren Sie die vertikale Leiste auf der linken Seite

In Verbindung stehende Artikel

Mehr sehen