So lösen Sie Textüberläufe mit CSS

Textüberlauf ist immer ein großes Problem, insbesondere in programmatischen Umgebungen. Es gibt immer nur eine begrenzte Menge Platz, aber es können variable Inhalte zu diesem Platz hinzugefügt werden. Ich habe kürzlich an einer Tabelle zur Anzeige von Benutzerinformationen gearbeitet und festgestellt, dass längere Zeichenfolgen die Tabellenanzeige unterbrechen. Die offensichtliche Lösung besteht darin, eine overflow:hidden-Einstellung für Tabellenzellen hinzuzufügen, aber selbst dann sieht der Text nicht natürlich abgeschnitten aus. Der Weg, den Textüberlauf elegant zu gestalten, besteht darin, Ellipsen und die CSS-Eigenschaft text-overflow zu verwenden. mal sehen!

CSS

Das Erstellen des CSS hinter den Auslassungspunkten ist sehr einfach, einschließlich Breite, Umbruch, Überlauf und Textüberlauf:

.dataTable td { 
/ * essential * / 
text-overflow ：ellipsis ; 
width： 200px ; 
white-space： nowrap ; 
overflow：hidden ;
/ *外观漂亮* / 
padding： 10px; 
}

Das Festlegen der Breite bietet Ein klarer Rahmen, Leerraum verhindert den normalen Zeilenumbruch, ein versteckter Überlauf stellt sicher, dass die Breitenabmessung eingehalten wird, und die Einstellung für den Textüberlauf sorgt für Ellipsen. Großartig, oder? Aber es gibt ein Problem...

Firefox und Ellipsen

Leider unterstützt Firefox derzeit keinen Textüberlauf: Ellipsen. Das Dojo Toolkit bietet eine einfache Lösung für Firefox: dojox.html.ellipsis. Diese Ressource verwendet einen iFrame-Shim, um Ellipsen zu erstellen. So verwenden Sie es:

//需要资源 dojo 。require （“dojox.html.ellipsis” ）;

Nachdem Sie die JavaScript-Ressource benötigt haben, ist es für dojoxEllipsis an der Zeit, einen Knoten auf der Seite zu platzieren, der angibt, dass die Ressource dojox.html.ellipsis sie ellipsen soll:

< div  class = “ dojoxEllpsis ” > Pellentesque居住者morbi tristique senectus et netus et malesuada ... </ div >

dojoxEllipsis Jedes Mal, wenn der DOM-Baum geändert wird, durchsucht Dojo die Seite nach einem Element mit einer CSS-Klasse und ellipsiert es.

Die Implementierung dynamischer Auslassungspunkte für Inhalte ist eine einfache, subtile und effektive Möglichkeit, Inhalte innerhalb eingeschränkter Inhalte elegant zu verwalten. Textüberlauf: Ellipsen werden von großen Browser-Anbietern außer Firefox unterstützt. Die Implementierung von Dojo ist stabil und effizient, kann jedoch die Seite verlangsamen, wenn viele ovale Elemente auf der Seite vorhanden sind. Viel Spaß beim Ovalisieren!

Das obige ist der detaillierte Inhalt vonSo lösen Sie Textüberläufe mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!