單行 多行內容超出指定寬度或高度時,顯示省略號

2021-08-27 12:24:37 字數 368 閱讀 9226

一、[b]第一種方法[/b]:使用css樣式來控制。

html標籤裡面的內容超出自身寬度或高度時,顯示省略號(可以是任何存放內容的標籤,如:div,ul,li),示例如下:

1、給li標籤設定css樣式,適用於單行文字顯示:

.li

當li裡面的內容總寬度找過 200px的時候,超出的部分會以「...」的形式顯示。

2、但當div裡面的內容出現多行的時候則不能達到預期的效果。下面是解決多行的時候顯示「...」的方案。

具體js實現參考:[url]

二、[b]第二種方法[/b]:使用自定義jsp標籤,在標籤類中進行擷取。

如:

文字超出擷取(單行 多行)

width 100px overflow hidden white space nowrap text overflow ellipsis width 100px overflow hidden display webkit box webkit box orient vertical webkit...

Html中文字單行超出和多行超出顯示省略號

單行文字的溢位顯示省略號 width 200px overflow hidden text overflow ellipsis white space nowrap 加寬度width屬來相容部分瀏覽器 多行文字溢位顯示省略號 width 220px height 58px overflow hidd...

一行內文字超出指定寬度溢位的處理

看到標題你一定很容易就會想到截斷文字加 的做法。哈哈,就是這樣。其實寫這篇日誌也只是把這樣方法做個記錄,因為好像還有很多人不記得遇到這樣的情況該如何處理。我們也可以參考52css.com以前的文章 css對文字溢位時的自動隱藏處理 如何設定列表 li 超出部分顯示省略號 一般的文字截斷 適用於內聯與...