CSS控制字元長度和顯示長度

2021-08-27 17:45:09 字數 688 閱讀 8255

在網頁設計中,會遇到文字超過固定長度導致整體的網頁變形的情況。程式設計師往往需要擷取固定的長度來實現某些固定長度的控制.

介紹一種直接採用css的**控制來實現文字擷取的方法。與程式設計師的直接字元擷取的方式有點區別,其優勢是可以自動控制文字顯示的長度;缺點是不同瀏覽器的相容性並不完美。使用到 overflow,text-overflow,white-space 這三個主要的屬性,其他的**屬於修飾作用。

css**:

html**:

css讓容器的溢位部分內容隱藏起來

**分析:

1. width:200px; //指定寬度:

2. overflow:hidden; //將超出內容隱藏

3. text-overflow:ellipsis; //ie專用屬性,文字溢位時顯示省略標記();其他瀏覽器不支援。

4. white-space:nowrap; //強制內容不換行。強制在同一行內顯示所有文字,直到文字結束或者遭遇 br 元素

目前使用這種方法比較成功的示例是gmail的內容顯示,在ie下達到最好的效果。如果是ff那就比較糟糕,總是會出現擷取半個中文的效果。其中涉及到最主要的原因是 text-overflow 這個屬性只在ie下有效,目前很多css屬性也存在這個問題,特別重要的是margin和padding這兩個屬性,往往導致頁面出現各種不同的效果;在頁面設計的時候,需要注意這些屬性在不同瀏覽器的顯示效果。

css 控制字元顯示長度

css html 使用css限制顯示內容的長度,被隱藏的部分使用 顯示 其中 width 200px 指定 div 的寬度 overflow hidden 超出的內容隱藏 text overflow ellipsis ie專用屬性,文字溢位時顯示省略標記 其他瀏覽器不支援 white space n...

用CSS來控制字元長度和顯示長度

用css來控制字元長度和顯示長度 在網頁排版設計中,會遇到文字超過固定長度導致整體的網頁變形的情況。程式設計師往往需要擷取固定的長度來實現某些固定長度的控制。介紹一種直接採用css的 控制來實現文字擷取的方法,與程式設計師的直接字元擷取的方式有些區別,其優勢是可以自動控制文字顯示的長度 缺點是不同瀏...

DataList繫結時控制字串長度

今天做主介面,突然發現datalist繫結的字元是需要控制長度,暈倒的問題,後來整理了一下,問題解決了 前台 1 15後台 1 public string cutstring1 string str,intlength 210 else 1114 if i length 1519 j 20 21re...