简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-09-22 08:42:14
Original
1087 Leute haben es durchsucht

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>
Nach dem Login kopieren
<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>;
}
Nach dem Login kopieren

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">
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>
Nach dem Login kopieren
<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>;
}
Nach dem Login kopieren
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 属性的值应该从父元素继承

Verwandte Etiketten：
css单行文本与多行溢出文本的省略号问题
Quelle：php.cn
Vorheriger Artikel：Lassen Sie uns über einige interessante CSS-Themen sprechen (1) – So implementieren Sie die vertikale Leiste auf der linken Seite Nächster Artikel：CSS von Grund auf neu starten (1 21.09.2016)
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
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
2
1765
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
10
1906
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1624
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1532
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1570
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！