Detaillierte Erläuterung verschiedener Methoden zum Abfangen von Zeichen mit CSS (CSS-Schriftsatz verbirgt Überlauftext)

Detaillierte Erläuterung verschiedener Methoden zum Abfangen von Zeichen mit CSS (CSS-Schriftsatz verbirgt Überlauftext)_CSS/HTML

WBOY

Freigeben： 2016-05-16 12:03:38

Original

2789 Leute haben es durchsucht

Methode 1:

Code kopieren Der Code lautet wie folgt:

Eine Zeichenfolge beliebiger Länge

Hinweis: Der Vorteil besteht darin, dass der Inhalt ein beliebiges HTML-Element sein kann, einschließlich Hyperlinks und Bildern usw. In IE6 werden am Ende automatisch Auslassungspunkte angezeigt. Der Nachteil besteht darin, dass der Breitenwert angegeben werden muss und die Breite kein Prozentsatz sein darf, da sie sonst im IE als Prozentsatz der gesamten Zeichenlänge betrachtet wird.

Methode 2:

Code kopieren Der Code lautet wie folgt:

Hinweis: Der Vorteil besteht darin, dass die Breite prozentual eingestellt werden kann. Der Nachteil besteht jedoch darin, dass der Inhalt nur aus reinem Text bestehen kann und keine Hyperlinks und anderen Inhalt enthalten kann.

CSS-String abschneiden CSS implementiert die automatische Textkürzung, der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

div.test{

Breite:200px;

Höhe:14px;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

text-overflow: ellipsis;/* IE/Safari */

-ms-text-overflow: Auslassungspunkte;

-o-text-overflow: ellipsis;/* Opera */

-moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/

}

Der Schlüssel ist text-overflow, seine Syntax ist wie folgt:

Code kopieren Der Code lautet wie folgt:

text-overflow:clip | >Clip: Keine Auslassungspunkte (...) anzeigen, sondern einfaches Zuschneiden 
Auslassungspunkte: Auslassungspunkte (...) anzeigen, wenn das Objekt über den inneren Text hinausgeht 

Es ist zu beachten, dass dieses Attribut exklusiv für den IE gilt! Allerdings ist IE nicht der einzige verfügbare. Obwohl dieses Tag von Guaioh nicht öffentlich unterstützt und übernommen wird, ist es in den privaten Attributen vieler Browser enthalten. Text-Overflow funktioniert nicht, wenn er alleine verwendet wird. Er muss mit white-space:nowrap;overflow:hidden; kombiniert werden. Die Funktion des vorherigen Satzes besteht darin, zu erzwingen, dass der gesamte Text in derselben Zeile angezeigt wird, bis das Ende des Textes oder das br-Objekt erreicht wird.

Es ist nicht schwer zu erkennen, dass der beste Ort für die Verwendung von Text-Overflow nicht der Text des Artikels ist, sondern eine Liste von Titeln oder Zusammenfassungen, die in einer einzigen Zeile angezeigt werden.

Syntax:

Code kopierenDer Code lautet wie folgt:

Leerzeichen: normal |

Wert:

Code kopieren Der Code lautet wie folgt:

normal: Standardwert. Standardverarbeitungsmethode. Text verarbeitet automatisch Zeilenumbrüche. Wenn die Containergrenze erreicht ist, wird der Inhalt in die nächste Zeile verschoben. 
pre: Zeilenumbrüche und andere Leerzeichen werden geschützt. Dieser Wert erfordert die Deklaration von IE6+ oder !DOCTYPE als standardkonforme Modusunterstützung. Wenn die !DOCTYPE-Deklaration keinen standardkonformen Modus angibt, kann dieses Attribut verwendet werden, hat jedoch keine Auswirkung. Das Ergebnis entspricht normal. Siehe pre-Objekt
nowrap: Erzwingt die Anzeige des gesamten Textes in derselben Zeile, bis das Ende des Textes erreicht ist oder ein br-Objekt gefunden wird. Siehe noWrap-Attribut

Beschreibung:

Legen Sie die Verarbeitungsmethode für Leerzeichen innerhalb des Objekts fest oder rufen Sie sie ab.

Leerzeichen wie Zeilenumbrüche, Leerzeichen und TAB werden in HTML-Dokumenten standardmäßig ignoriert. Wenn diese Eigenschaft auf „normal“ oder „nowrap“ festgelegt ist, können Sie die benannte Entität „Non-Breaking-Space“ zum Hinzufügen von Leerzeichen und das Element „br“ zum Hinzufügen von Zeilenumbrüchen verwenden. Diese Eigenschaft hat die gleiche Auswirkung auf Inhalte, die Sie mit dem Document Object Model (DOM) manipulieren, wie auf Inhalte, die vom IE angezeigt werden.

Diese Eigenschaft funktioniert bei Blockobjekten.

Diese Eigenschaft ist für das currentStyle-Objekt schreibgeschützt. Es ist für andere Objekte lesbar und beschreibbar.

Die entsprechende Skriptfunktion ist whiteSpace .