CSS überschreitet die angegebene Textbreite und verwendet stattdessen Ellipsen und der Text wird nicht umbrochen.

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Verwendung von Ellipsen vor, um CSS über die angegebene Textbreite hinaus zu ersetzen und den Text nicht umzubrechen, und ich teile sie hiermit im Skript Home-Plattform als Referenz.

Allgemeine Textkürzung (gilt für Inline und Block):

.text-overflow {   
    display:block;/*内联对象需加 */
    width:31em;/* 何问起 hovertree.com */
    word-break:keep-all;/* 不换行 */
    whitewhite-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

Für Tabelle Textüberlauf Definition:

Für Tabelle außerhalb des zulässigen Bereichs Anzeigeauslassungspunkte

table{   
     width:em;   
     table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
 }   
 td{   
    width:%;   
    word-break:keep-all;/* 不换行 */
    whitewhite-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

Was Sie beachten müssen, ist, dass dieser CSS-Stil nur für eine einzelne Textzeile funktioniert. Wenn Sie ihn für mehrere Zeilen verwenden möchten, nur für die erste Zeile wird funktionieren.

Nur ​​IE hat „...“ in dieser Schreibweise.

Andere Browser blenden den Text aus, wenn er die angegebene Breite überschreitet.

Das Obige ist eine Einführung in die Verwendung von Ellipsen, wenn CSS die angegebene Breite des Textes überschreitet und der Text nicht umbrochen wird. Ich hoffe, dass es für alle hilfreich ist die chinesische PHP-Website!

Das obige ist der detaillierte Inhalt vonCSS überschreitet die angegebene Textbreite und verwendet stattdessen Ellipsen und der Text wird nicht umbrochen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!