Problem mit Ellipsen in einzeiligem CSS-Text und mehrzeiligem Überlauftext-HTML-Tutorial-php.cn

Heim

Web-Frontend

HTML-Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 22, 2016 am 08:42 AM

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 属性的值应该从父元素继承

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

1 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7444

CakePHP-Tutorial

1371

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Mar 20, 2025 pm 05:56 PM

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Mar 12, 2025 pm 04:05 PM

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

See all articles