Mehrzeiliger Textüberlauf zeigt Ellipsen an (…)

Jeder sollte wissen, dass das <a href="http://www.php.cn/wiki/868.html" target="_blank">text-</a><a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>:ellipsis-Attribut verwendet wird, um die Überlaufanzeige von Auslassungspunkten (…) in einer einzelnen Textzeile zu realisieren. Natürlich müssen einige Browser auch das Attribut width <a href="http://www.php.cn/wiki/835.html" target="_blank">width<code><a href="http://www.php.cn/wiki/835.html" target="_blank">width</a> hinzufügen .

css Code:

1. overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

Dieses Attribut unterstützt jedoch nicht mehrere Zeilen Der Text läuft über und zeigt Auslassungspunkte an. Hier stellen wir verschiedene Methoden vor, um diesen Effekt basierend auf dem Anwendungsszenario zu erzielen.

WebKit-Browser oder mobile Seite

Die Seitenimplementierung im WebKit-Browser oder im mobilen Terminal (die meisten Browser mit WebKit-Kern) ist relativ einfach und Sie können die CSS-Erweiterung Property von WebKit direkt verwenden (WebKit ist ein private Eigenschaft)

; Hinweis: Dies ist eine nicht unterstützte WebKit-Eigenschaft, die nicht im CSS-Spezifikationsentwurf erscheint. -webkit-line-clamp

wird verwendet, um die Anzahl der in einem Blockelement angezeigten Textzeilen zu begrenzen. Um diesen Effekt zu erzielen, muss es mit anderen WebKit-Eigenschaften kombiniert werden. -webkit-line-clampGemeinsame Kombinationsattribute:

1. <a href="http://www.php.cn/wiki/927.html" target="_blank">Anzeige <p>: -webkit-box; Attribute, die kombiniert werden müssen, um das <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: -webkit-box;Objekt als elastisch skalierbares Boxmodell anzuzeigen.

2. Attribute, die kombiniert werden müssen, um die Anordnung der untergeordneten Elemente des Flex-Box-Objekts festzulegen oder abzurufen. -webkit-box-orient

3. kann verwendet werden, um bei mehrzeiligem Text Text außerhalb des zulässigen Bereichs mit den Auslassungspunkten „…“ auszublenden. text-overflow: ellipsis;

css Code:

1. overflow : hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

Dieses Attribut Es eignet sich besser für WebKit-Browser oder mobile Browser (von denen die meisten WebKit-basiert sind).

Spezifische Beispiele finden Sie unter http://www.php.cn/

Browserübergreifende kompatible Lösung

Eine zuverlässigere und einfachere Methode ist die Einrichtung einer relativ positionierte Containerhöhe, simuliert mit Elementen, die Ellipsen enthalten (…);

Zum Beispiel:

css Code:

1. p {
       position:relative;
       line-height:1.4em;
       /* 3 times the line-height to show 3 lines */
       height:4.2em;
       overflow:hidden;
   }
   p::after {
       content:"...";
       font-weight:bold;
       position:absolute;
       bottom:0;
       right:0;
       padding:0 20px 1px 45px;
       background:url(http://www.php.cn/) repeat-y;
   }

Hier ein paar Punkte zu beachten:

1. Die Höhe ist wirklich gut, dreimal so hoch

   ; line-height

2. Es ist einfacher, das Ende wegzulassen und durchscheinendes PNG zu verwenden, um einen Ausweicheffekt zu erzeugen, oder die Hintergrundfarbe festzulegen;

3. IE6-7 zeigt keine

   Inhalte an. Um mit IE6-7 kompatibel zu sein, können Sie dem Inhalt ein Tag hinzufügen, z. B. mit content, um <span class="line-clamp">...</span>

<🎜 zu simulieren >Um IE8 zu unterstützen, müssen Sie
4. durch

   ersetzen; ganz einfach, ich empfehle mehrere ausgereifte kleine ::afterTools:after, die ähnliche Arbeit leisten:

1. Clamp.js

Download- und Dokumentationsadresse: http://www.php.cn /Es ist auch sehr einfach zu verwenden:

js Code:

2.jQueryplug-in-jQuery.dotdotdot

Dies ist auch sehr praktisch zu verwenden:

1. var module = document.getElementById("clamp-this-module");
   $clamp(module, {clamp: 3});

   js
Code:

Das obige ist der detaillierte Inhalt vonMehrzeiliger Textüberlauf zeigt Ellipsen an (…). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!