Ein Auslassungszeichen am Ende einer Zeile mit CSS. Trimmen von ein- oder mehrzeiligem Text nach Höhe durch Hinzufügen von Auslassungspunkten in CSS

Vlad Merzhevich

Trotz der Tatsache, dass Monitore mit großer Diagonale immer erschwinglicher werden und ihre Auflösung ständig zunimmt, stellt sich manchmal die Aufgabe, viel Text auf begrenztem Raum unterzubringen. Dies kann beispielsweise erforderlich sein für mobile Version Site oder für eine Schnittstelle, bei der die Anzahl der Zeilen wichtig ist. In solchen Fällen ist ein Trimmen sinnvoll lange Linien Text, so dass nur der Anfang des Satzes übrig bleibt. Auf diese Weise bringen wir die Benutzeroberfläche auf eine kompakte Form und reduzieren die Menge der angezeigten Informationen. Das Trimmen der Zeilen selbst kann auf der Serverseite mit demselben PHP durchgeführt werden, ist jedoch durch CSS einfacher und Sie können immer den gesamten Text anzeigen, wenn Sie beispielsweise mit dem Mauszeiger darüber fahren. Als nächstes schauen wir uns Methoden zum Schneiden von Text mit einer imaginären Schere an.

In Wirklichkeit kommt es darauf an, die overflow-Eigenschaft mit dem Wert versteckt zu verwenden. Die Unterschiede liegen lediglich in der unterschiedlichen Darstellung unseres Textes.

Damit die Überlaufeigenschaft den Text in seiner ganzen Pracht zeigt, müssen Sie den Text mithilfe von Leerzeichen mit dem Wert nowrap auspacken. Geschieht dies nicht, tritt der gewünschte Effekt nicht ein; es werden Bindestriche zum Text hinzugefügt und der gesamte Text wird angezeigt. Beispiel 1 zeigt, wie langer Text mit einem angegebenen Satz von Stileigenschaften gekürzt wird.

Beispiel 1. Überlauf für Text

HTML5 CSS3 IE Cr Op Sa Fx

Text .size ( Leerraum: nowrap; /* Textumbruch aufheben */ Überlauf: versteckt; /* Inhalt zuschneiden */ Hintergrund: #fc0; /* Hintergrundfarbe */ Innenabstand: 5px; /* Ränder */ )

Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 1.

Reis. 1. Das Erscheinungsbild des Textes nach Anwendung der Überlaufeigenschaft

Wie aus der Abbildung hervorgeht, gibt es im Allgemeinen einen Nachteil: Es ist nicht offensichtlich, dass der Text eine Fortsetzung hat, daher muss der Benutzer darauf hingewiesen werden. Dies geschieht normalerweise mithilfe eines Farbverlaufs oder einer Ellipse.

Um deutlicher zu machen, dass der Text auf der rechten Seite nicht endet, können Sie einen Farbverlauf von einer transparenten Farbe zur Hintergrundfarbe darüber legen (Abb. 2). Dadurch entsteht der Effekt, dass sich der Text allmählich auflöst.

Reis. 2. Verlaufstext

Beispiel 2 zeigt, wie dieser Effekt erzeugt wird. Der Stil des Elements selbst bleibt praktisch gleich, aber wir werden den Farbverlauf selbst mithilfe des Pseudoelements ::after und CSS3 hinzufügen. Dazu fügen wir über die Content-Eigenschaft ein leeres Pseudoelement ein und wenden darauf einen Farbverlauf mit unterschiedlichen Präfixen für gängige Browser an (Beispiel 2). Die Breite des Farbverlaufs lässt sich ganz einfach mit width ändern. Sie können den Grad der Transparenz auch anpassen, indem Sie den Wert 0,2 durch Ihren eigenen ersetzen.

Beispiel 2: Farbverlauf über Text

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Text .size ( Leerzeichen: nowrap; /* Textumbruch aufheben */ Überlauf: versteckt; /* Inhalt zuschneiden */ Innenabstand: 5px; /* Ränder */ Hintergrund: #fc0; /* Hintergrundfarbe */ Position: relativ ; /* Relative Positionierung */ ) .size::after ( content: ""; /* Ausgabe des Elements */ position: absolute; /* Absolute Positionierung */ right: 0; top: 0; /* Position des Elements */ width : 40px; /* Gradient width*/ height: 100%; /* Parent height */ /* Gradient */ background: -moz-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100 % ; Hintergrund: -webkit-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100 %); Hintergrund: -o-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100 %); Hintergrund: -ms-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100 %); Hintergrund: linear-gradient(to right, rgba(255,204,0, 0.2), #fc0 100 %); )

Ein intradiskretes Arpeggio verwandelt eine Polyserie; dies ist eine einmalige Vertikale in einem superpolyphonen Gefüge.

Diese Methode funktioniert nicht Internet-Browser Explorer bis einschließlich Version 8.0, da dieser keine Farbverläufe unterstützt. Sie können jedoch auf CSS3 verzichten und einen Farbverlauf auf die altmodische Art und Weise über ein Bild im PNG-24-Format erstellen.

Diese Methode kann nur mit kombiniert werden einfacher Hintergrund und im Falle eines Hintergrundbilds wird der Farbverlauf über dem Text sichtbar sein.

Sie können anstelle eines Farbverlaufs auch Auslassungspunkte am Ende des zugeschnittenen Texts verwenden. Darüber hinaus wird es automatisch mithilfe der Textüberlaufeigenschaft hinzugefügt. Sie wird von allen Browsern verstanden, auch von älteren IE-Versionen, und der einzige Nachteil dieser Eigenschaft besteht darin, dass ihr Status derzeit unklar ist. CSS3 scheint diese Eigenschaft zu enthalten, aber der damit verbundene Code besteht die Validierung nicht.

Beispiel 3 zeigt die Verwendung der text-overflow-Eigenschaft mit dem Wert ellipsis, der ein Auslassungszeichen hinzufügt. Wenn Sie mit der Maus über den Text fahren, wird dieser vollständig angezeigt und in einer Hintergrundfarbe hervorgehoben.

Beispiel 3: Textüberlauf verwenden

HTML5 CSS3 IE Cr Op Sa Fx

Text .size ( Leerzeichen: nowrap; /* Textumbruch aufheben */ Überlauf: ausgeblendet; /* Inhalt zuschneiden */ Innenabstand: 5 Pixel; /* Ränder */ Textüberlauf: Auslassungspunkte; /* Auslassungspunkte */ ) .Größe :hover ( Hintergrund: #f0f0f0; /* Hintergrundfarbe */ Leerraum: normal; /* Normaler Textumbruch */ ) Das Unbewusste verursacht Kontrast, dies wird von Lee Ross als grundlegender Zuordnungsfehler identifiziert, der in zu sehen ist viele Experimente.

Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 3.

Reis. 3. Text mit Auslassungspunkten

Der große Vorteil dieser Methoden besteht darin, dass der Farbverlauf und die Ellipsen nicht angezeigt werden, wenn der Text kurz ist und vollständig in einen bestimmten Bereich passt. So wird der Text wie gewohnt angezeigt, wenn er vollständig auf dem Bildschirm sichtbar ist, und abgeschnitten, wenn die Breite des Elements verringert wird.

Viele Leute sind wahrscheinlich auf das Problem gestoßen, wenn Text in einer Zeile angezeigt werden muss. Darüber hinaus kann der Text recht lang sein und die Breite des Blocks, in dem sich dieser Text befindet, ist in der Regel auf mindestens die gleiche Größe des Browserfensters beschränkt. Für diese Fälle wurde die Text-Overflow-Eigenschaft erfunden, die in der CSS3-Empfehlung enthalten war und vor sehr langer Zeit erstmals im IE6 implementiert wurde. Wenn Sie diese Eigenschaft für einen Block verwenden und dessen Text breiter als der Block selbst ist, wird der Text abgeschnitten und am Ende werden Auslassungspunkte eingefügt. Obwohl hier nicht alles so einfach ist, werden wir etwas später darauf zurückkommen.
Mit Internet Explorer ist alles klar, was ist mit anderen Browsern? Und obwohl die Text-Overflow-Eigenschaft derzeit von der CSS3-Spezifikation ausgeschlossen ist, unterstützt Safari sie (zumindest in Version 3), Opera auch (seit Version 9, obwohl die Eigenschaft vorhanden ist). heißt -o-overflow-text). Aber Firefox tut es nicht, es unterstützt es nicht, und selbst in Version 3 wird es das nicht tun. Es ist traurig, aber wahr. Aber vielleicht kann man etwas tun?

Natürlich ist es machbar. Als ich im Internet nach dieser Eigenschaft suchte und wie man sie in Firefox umsetzt, bin ich darauf gestoßen einfache Lösung. Die Essenz der Lösung:

Das ist alles. Weitere Informationen finden Sie im Artikel.
Die Lösung ist nicht schlecht, aber es gibt Probleme:

Konzentrieren wir uns zunächst auf das zweite Problem, nämlich wie man die Anzeige von Auslassungspunkten vermeidet, wenn sie nicht benötigt werden. Nachdem ich mir den Kopf zerbrochen und „ein wenig“ experimentiert hatte, fand ich eine Lösung. Ich werde versuchen, es zu erklären.
Der Punkt ist, dass wir einen separaten Block mit Auslassungspunkten benötigen, der nur erscheint, wenn der Text zu viel Platz in der Breite einnimmt. Dann kam mir die Idee eines fallenden schwebenden Blocks. Obwohl es beängstigend klingt, bedeutet es einfach einen Block, der immer da ist und nach rechts gedrückt wird, aber wenn die Breite des Textes groß wird, verschiebt der Text den Block in die nächste Zeile.
Kommen wir zum Üben, sonst ist es schwer zu erklären. Lasst uns einstellen HTML-Struktur:

Schauen wir uns zunächst an, was wir getan haben. Zuerst legen wir die Zeilenhöhe und die Höhe des Hauptblocks fest, da wir die Höhe des Blocks und die Höhe der Textzeile kennen müssen. Wir legen den gleichen Wert für den oberen Rand des Blocks mit Auslassungspunkten fest, jedoch mit negativer Wert. Wenn der Block also nicht auf die nächste Zeile „zurückgesetzt“ wird, befindet er sich über der Textzeile (eine Zeile), wenn er zurückgesetzt wird, befindet er sich auf seiner Ebene (tatsächlich ist er niedriger, wir ziehen ihn einfach). eine Reihe). Um unnötige Dinge zu verbergen, insbesondere wenn die Auslassungspunkte nicht angezeigt werden müssen, machen wir „overflow:hidden“ für den Hauptblock. Wenn sich die Auslassungspunkte also über der Linie befinden, werden sie nicht angezeigt. Dadurch können wir auch Text entfernen, der außerhalb des Blocks (am rechten Rand) liegt. Um zu verhindern, dass der Text unerwartet umbricht und den Block mit den Auslassungspunkten immer weiter nach unten drückt, erstellen wir „white-space:nowrap“ und verbieten so Bindestriche – unser Text steht immer in einer Zeile. Für den Block mit Text setzen wir float:left, damit er den Block mit den Auslassungspunkten nicht sofort zusammenbricht und die Mindestbreite einnimmt. Da innerhalb des Hauptblocks (DIV.ellipsis) beide Blöcke schwebend sind (schwebend: links/rechts), wird der Hauptblock zusammenbrechen, wenn der Textblock leer ist, also legen wir für den Hauptblock eine feste Höhe fest (Höhe: 1,2em). . Und schließlich verwenden wir das Pseudoelement ::after, um die Auslassungspunkte anzuzeigen. Für dieses Pseudoelement legen wir auch einen Hintergrund fest, um den darunter erscheinenden Text abzudecken. Wir setzen einen Rahmen für den Hauptblock, nur um die Abmessungen des Blocks zu sehen; später werden wir ihn entfernen.
Wenn Firefox Pseudoelemente hinsichtlich ihrer Positionierung (Einstellung von Position/Float usw.) sowie Opera und Safari unterstützen würde, wäre es möglich, keinen separaten Block für Ellipsen zu verwenden. Versuchen Sie, die letzten drei Regeln durch die folgenden zu ersetzen:

Wie Sie vielleicht bemerkt haben, haben wir das Problem beseitigt, dass Ellipsen erscheinen, wenn der Text in einen Block passt. Allerdings haben wir noch ein weiteres Problem: Der Text ist in der Mitte der Buchstaben abgeschnitten. Und außerdem funktioniert es im IE nicht. Um beides zu umgehen, müssen Sie die native Textüberlaufregel für Browser verwenden und nur für Firefox die oben beschriebene Lösung verwenden (es gibt keine Alternative). Wir werden später herausfinden, wie wir eine Lösung „nur für Firefox“ erstellen können, aber jetzt versuchen wir, das, was wir haben, mithilfe von Textüberlauf zum Laufen zu bringen. Lassen Sie uns das CSS optimieren:

Als ich mir die eingangs erwähnte Seite (bevor ich diesen Artikel schreiben wollte) noch einmal angeschaut habe, habe ich aus Neugier die Kommentare nach passenden Ideen durchgesehen. Und ich habe es in einem Kommentar gefunden, in dem es um eine andere Lösung ging, die in Firefox und IE funktioniert (für diese Person, wie auch für den Autor des ersten Artikels, gibt es offenbar keine anderen Browser). In dieser Lösung geht der Autor also auf etwas andere Weise mit diesem Phänomen (dem Fehlen eines Textüberlaufs) um, indem er Handler an die Überlauf- und Unterlaufereignisse an Elemente anhängt, für die bei Bedarf Auslassungspunkte eingefügt werden mussten. Nicht schlecht, aber meiner Meinung nach ist diese Lösung (im Hinblick auf die Ressourcen) sehr teuer, insbesondere weil sie etwas fehlerhaft ist. Als er jedoch herausfand, wie er dies erreichte, stieß er auf etwas Interessantes, nämlich die CSS-Eigenschaft -moz-binding. Soweit ich weiß, ist dies ein Analogon zum Verhalten im IE, nur mit einer anderen Soße und einem anderen Kühler. Aber wir gehen nicht auf Details ein, sagen wir einfach, dass Sie auf diese Weise einen JavaScript-Handler an ein Element anhängen können mit CSS. Es klingt seltsam, aber es funktioniert. Was machen wir:

Diesem Punkt könnten wir ein Ende bereiten, aber wir möchten unsere Lösung gerne noch ein wenig verbessern. Da wir jedem Block einen Konstruktor hinzufügen und somit die Kontrolle darüber erlangen können, warum nicht diesen Vorteil nutzen? Vereinfachen wir unsere Struktur:

Ich gebe Ihnen ein kleines Beispiel für das Layout eines Drittanbieters. Ich habe das Inhaltsverzeichnis einer der Wikipedia-Seiten (der ersten, die angezeigt wurde) genommen und die oben beschriebene Methode darauf angewendet.
Allgemein diese Entscheidung kann nur mit einer gewissen Dehnung als universell bezeichnet werden. Es hängt alles von Ihrem Layout und seiner Komplexität ab. Möglicherweise benötigen Sie eine Feile oder vielleicht ein Tamburin. Obwohl ich denke, dass es in den meisten Fällen funktionieren wird. Und dann haben Sie jetzt einen Ausgangspunkt ;)
Ich hoffe, Sie haben aus dem Artikel etwas Interessantes und Nützliches gelernt;) Lernen, experimentieren, teilen.
Viel Glück!

Es gibt Text beliebiger Länge, der in einem Block fester Höhe und Breite angezeigt werden muss. In diesem Fall sollte, wenn der Text nicht vollständig passt, ein Textfragment angezeigt werden, das vollständig in den angegebenen Block passt, woraufhin ein Auslassungszeichen gesetzt wird.

Diese Aufgabe ist durchaus üblich, aber gleichzeitig nicht so trivial, wie es scheint.

In diesem Fall können Sie die Eigenschaft text-overflow: ellipsis verwenden. In diesem Fall muss der Container über die Eigenschaft verfügen Überlauf gleich versteckt oder Clip

Block (Breite: 250 Pixel; Leerraum: Nowrap; Überlauf: versteckt; Textüberlauf: Auslassungspunkte;)

Die erste Möglichkeit, mehrzeiligen Text zu trimmen, ist mit mit CSS Eigenschaften wenden Pseudoelemente an :Vor Und :nach. Beginnen wir mit dem HTML-Markup

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Wir wissen nur, dass wir uns auf ein Mindestmaß beschränken müssen, denn unser Körper wird nicht von einer Kommode betroffen sein. Zweimal und jedes Mal schmerzt sie in der Vulputation, bis sie belästigt wird, und die Heilige Schrift wird nicht leicht gemacht, während sie eros und akkumsaniert wird, und die wahre Würde, die sie vermisst, wird im Laufe der Zeit von ihr geschwächt und nicht leicht gemacht.

Und nun die Eigenschaften selbst

Box (Überlauf: versteckt; Höhe: 200 Pixel; Breite: 300 Pixel; Zeilenhöhe: 25 Pixel;) .box:before (Inhalt: ""; Float: links; Breite: 5 Pixel; Höhe: 200 Pixel;) .box > *: zuerst -child ( float : right ; width : 100% ; margin-left : -5px ; ) .box :after ( content : "\02026" ; box-sizing : content-box ; float : right ; position : relative ; top : -25px; links: 100%; Breite: 3em; Rand links: -3em; Abstand rechts: 5px; Textausrichtung: rechts; Hintergrundgröße: 100% 100%; Hintergrund: linearer Farbverlauf (nach rechts, RGBA (255, 255, 255, 0), weiß 50 %, weiß ); )

Eine andere Möglichkeit besteht darin, die Eigenschaft „column-width“ zu verwenden, mit der wir die Spaltenbreite für mehrzeiligen Text festlegen. Bei Verwendung dieser Methode ist es jedoch nicht möglich, am Ende Auslassungspunkte festzulegen. HTML:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Wir wissen nur, dass wir uns auf ein Mindestmaß beschränken müssen, denn unser Körper wird nicht von einer Kommode betroffen sein. Zweimal und jedes Mal schmerzt sie in der Vulputation, bis sie belästigt wird, und die Heilige Schrift wird nicht leicht gemacht, während sie eros und akkumsaniert wird, und die wahre Würde, die sie vermisst, wird im Laufe der Zeit von ihr geschwächt und nicht leicht gemacht.

Block ( Überlauf : versteckt ; Höhe : 200px ; Breite : 300px ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; Spaltenbreite : 150px ; Höhe : 100% ; )

Die dritte Möglichkeit, mehrzeiligen Text mithilfe von CSS zu lösen, sind Webkit-Browser. Darin müssen wir mehrere spezifische Eigenschaften mit dem Präfix verwenden -Webkit. Das wichtigste ist -webkit-line-clamp, mit dem Sie die Anzahl der Zeilen angeben können, die in einem Block ausgegeben werden sollen. Die Lösung ist schön, aber aufgrund ihrer Funktionsfähigkeit in einer begrenzten Gruppe von Browsern eher begrenzt

Block (Überlauf: versteckt; Textüberlauf: Auslassungspunkte; Anzeige: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertikal;)

Hier kommt ein zusätzlicher unsichtbarer Block zum Einsatz, in den unser Text zunächst eingefügt wird und anschließend zeichenweise entfernt wird, bis die Höhe dieses Blocks kleiner als oder wird gleiche Höhe den gewünschten Block. Und am Ende wird der Text in den Originalblock verschoben.

var block = Dokument. querySelector(".block"), text = block. innerHTML, Klon = Dokument. createElement("div"); Klon Stil. position = "absolut" ; Klon Stil. Sichtbarkeit = "versteckt" ; Klon Stil. Breite = Block. clientWidth + „px“ ; Klon innerHTML = text ; dokumentieren. Körper. appendChild(Klon); var l = text . Länge - 1 ; for (; l >= 0 && clone . clientHeight > block . clientHeight ; -- l ) ( clone . innerHTML = text . substring (0 , l ) + "..." ; ) block . innerHTML = clone . innerHTML ;

Dies ist dasselbe wie ein Plugin für jQuery:

(function ($ ) ( var truncate = function (el ) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( position : "absolute" , Sichtbarkeit: „versteckt“, Höhe: „auto“); ( clone . text ( text . substring ( 0 , l ) + "..." ); ) el . text ( clone . text ()); clone . remove (); ); $ . fn . truncateText = function () ( return this . every (function () ( truncate ($ (this )); )); ); )(jQuery ));

Die Einführung von CSS3 bringt revolutionäre Veränderungen im Alltag von Webdesignern mit sich. CSS3 überrascht uns jeden Tag aufs Neue. Dinge, mit denen früher nur etwas gemacht werden konnte mit Javascript, sind jetzt ganz einfach mit CSS3 erledigt. Zum Beispiel die Text-Overflow-Eigenschaft.

Manchmal müssen wir beim Erstellen von Websites einen Teil des dynamischen Textes ausblenden, ohne dies zu tun nächste Zeile. Das heißt, Sie fügen langen Text in eine Tabelle mit fester Breite ein. Gleichzeitig gilt es, dem Nutzer zu zeigen, dass der sichtbare Teil des Textes nicht alles ist. Es gibt auch einen versteckten Teil. Dies kann durch Auslassungspunkte (...) dargestellt werden.

Mit CSS3 können wir dies problemlos erreichen CSS-Eigenschaft Textüberlauf

Markierung

Textüberlauf: Auslassungspunkte;

Bedeutung Ellipse ermöglicht es Ihnen, nach dem Text Auslassungspunkte hinzuzufügen (...)

Die Eigenschaft text-overflow: ellipsis ist nützlich, wenn:

1. Text erstreckt sich über die Zelle hinaus
2. In der Zelle ist freier Speicherplatz: nowrap.

Wir haben ein div mit einer Breite von 150 Pixeln, um die Namen von Unternehmen aus der Datenbank anzuzeigen. Aber gleichzeitig möchten wir nicht, dass lange Firmennamen in eine neue Zeile springen und verderben Aussehen Tische. Das heißt, wir müssen Text ausblenden, der über 150 Pixel hinausgeht. Darüber möchten wir den Nutzer auch informieren. Damit meint er, dass nicht der gesamte Titel angezeigt wird. Und wir möchten, dass der gesamte Text angezeigt wird, wenn die Maus darüber bewegt wird.

Schauen wir uns an, wie wir dies mit CSS3 tun können.

Company-wrap ul li (
Textüberlauf: Auslassungspunkte;
Überlauf versteckt;
Leerraum:nowrap; )

• Name der Firma


• Investnet Vermögensverwaltung


• Russell Investments


• Northwestern Mutual Financial Network


• ING Financial Networks

Browserunterstützung

Mit der Unterstützung verschiedener Browser weist diese Eigenschaft eine kleine Nuance auf. Alle außer Firefox werden einwandfrei angezeigt. Aber zum Glück gibt es eine Lösung für dieses Problem!

Drei Punkte in Firefox

Leider unterstützt Gecko (die Rendering-Engine in Firefox) diese Eigenschaft nicht. Jedoch Dieser Browser unterstützt XBL, mit deren Hilfe wir aus dieser Situation herauskommen.

Gecko ist eine kostenlose Website-Layout-Engine. Mozilla-Browser Firefox, Netscape und andere. Alte Namen sind „Raptor“ und „NGLayout“. Das Kernkonzept von Gecko besteht darin, offene Webstandards wie HTML, CSS, W3C DOM, XML 1.0 und JavaScript zu unterstützen. Ein weiteres Konzept ist plattformübergreifend. Heute arbeitet Gecko weiter Betriebssysteme Linux, Mac OS X, FreeBSD und Microsoft Windows sowie auf Solaris, HP-UX, AIX, Irix, OS/2, OpenVMS, BeOS, Amiga und anderen.

Um Auslassungspunkte in Firefox anzuzeigen, müssen wir dem Stylesheet eine Zeile hinzufügen.

Wenn Sie die Eigenschaft deaktivieren möchten, fügen Sie einfach Folgendes hinzu:

Moz-Bindung: url("bindings.xml#none");

Der nächste Schritt besteht darin, eine bindings.xml-Datei am selben Speicherort zu erstellen, an dem das Stylesheet gespeichert ist. Wir können jedes verwenden Texteditor dafür! Kopieren Sie den Code unten und benennen Sie die Datei bindings.xml.

document.getAnonymousNodes(this)[ 0 ]
this.label.style
this.style.display
if(this.style.display != val) this.style.display= val

this.label.value
if(this.label.value != val) this.label.value= val



var strings= this.textContent.split(/\s+/g)
if(!strings[ 0 ]) strings.shift()
if(!strings[ strings.length - 1 ]) strings.pop()
this.value= strings.join(" ")
this.display= strings.length ? "" : "keiner"


this.update()


this.update()

Endgültiger Code für alle Browser

Company-wrap ul li (
Textüberlauf: Auslassungspunkte;
-o-text-overflow: Auslassungspunkte;
-moz-binding: url("bindings.xml#ellipsis");
Leerraum: nowrap;
Überlauf versteckt;
}

CSS3 wird zum bevorzugten Tool für Webdesigner auf der ganzen Welt, um mit minimalem Code noch nie dagewesene Websites zu erstellen. Es gibt einfache, buchstäblich einzeilige Lösungen, die bisher nur mit Photoshop oder Javascript möglich waren. Lernen Sie noch heute die Leistungsfähigkeit von CSS3 und HTML5 kennen und Sie werden es nicht bereuen!

Um aus der grauen Masse der Übersetzer hervorzustechen und Ihre Sympathie, liebe Leserinnen und Leser, zu gewinnen, stehen am Ende meiner Lektionen weise Gedanken und Aphorismen. In diesen Zeilen findet jeder etwas für sich :)

Tragen Sie mit Würde, was Sie nicht ändern können.

Wie nervig sind manchmal die langen Namen von Produktlinks – jeweils drei Zeilen – oder die langen Überschriften anderer Blöcke. Wie toll wäre es, wenn man das Ganze irgendwie eingrenzen und kompakter machen könnte. Und wenn Sie mit der Maus darüber fahren, wird der Titel vollständig angezeigt.

Dafür brauchen wir Hilfe wird kommen Unser Favorit ist CSS. Es ist ganz einfach, schauen Sie.

Nehmen wir an, wir haben einen Block wie diesen aus einem Produktkatalog:

Hier ist seine Struktur:

Wunder-Yudo-Abend-Kraftspender, geheimnisvoll, Kunst. 20255-59

Ein wunderbares Produkt zu einem super Preis, nur 100 Rubel. Es wird Ihre einsamen Abende erhellen und Ihnen einen Vitalitätsschub verleihen!

Hier sind seine Stile:

Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px gestrichelt; Schriftgröße: 16px; Schriftstärke: fett; margin-bottom: 12px ; )

Stimmt, es sieht schrecklich aus. Natürlich können Sie den Namen des Produkts kürzen. Was aber, wenn es Hunderte oder Tausende davon gibt? Sie können PHP auch verwenden, um einen Teil des Namens abzuschneiden und ihn auf eine bestimmte Anzahl von Zeichen zu beschränken. Was aber, wenn sich das Layout später ändert und die Blöcke kleiner oder im Gegenteil 2-3 mal größer werden? Nichts davon ist eine Option, nichts davon passt zu uns.

Und hier kommen uns CSS und seine magische Textüberlaufeigenschaft zu Hilfe. Es muss jedoch in Verbindung mit mehreren anderen Eigenschaften korrekt verwendet werden. Nachfolgend zeige ich es euch fertige Lösung, danach erkläre ich, was was ist.

Lassen wir also die manuelle Bearbeitung von Produktnamen und das programmatische Zuschneiden von Stilen beiseite, nehmen wir CSS in die Hand und sehen, was wir bekommen:

Wunder-Yudo-Abend-Kraftspender, geheimnisvoll, Kunst. 20255-59

Ein wunderbares Produkt zu einem super Preis, nur 100 Rubel. Es wird Ihre einsamen Abende erhellen und Ihnen einen Vitalitätsschub verleihen!

Nun, ist es besser? Meiner Meinung nach sehr! Und bewegen Sie Ihre Maus über den Titel... voilà! Hier wird es uns vollständig gezeigt.

An unserer Struktur hat sich nichts geändert, ich habe lediglich ein Div mit der Klasse .header und dem Title-Tag hinzugefügt. Und hier sind die neuen, aktualisierten Stile:

Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px gestrichelt; Schriftgröße: 16px; Schriftstärke: fett; margin-bottom: 12px ; Überlauf: versteckt; Textüberlauf: Auslassungspunkte; Leerzeichen: Nowrap; )

Schauen Sie, was wir gemacht haben:

• Wir haben dem Block die Eigenschaft „white-space: nowrap“ hinzugefügt, die dem Text die Möglichkeit entzieht, Wörter in eine neue Zeile umzubrechen und ihn dadurch zu einer Zeile zu strecken;
• Dann haben wir die Eigenschaft overflow:hidden hinzugefügt, die die Sichtbarkeit unserer Linie auf die Breite des Blocks beschränkte, wodurch der gesamte Überschuss abgeschnitten und dem Besucher nicht angezeigt wurde;
• Nun, am Ende haben wir unserer Zeile mit der Eigenschaft text-overflow: ellipsis ein Auslassungszeichen hinzugefügt, um den Besucher wissen zu lassen, dass dies nicht das Ende der Zeile ist und dass er wahrscheinlich seine Maus bewegen und hineinsehen muss voll.

Liebe CSS, lerne CSS und die Website-Erstellung wird dir nicht so schwer erscheinen =)