css控制文本實現(xiàn)越界省略號以及自動換行
發(fā)布時間:2014-03-09 17:11:55 作者:佚名
我要評論

css文本控制包括越界省略號以及自動換行,具體示例代碼如下,大家可以測試下
越界省略號
.text-overflow {
display:block;/*內聯(lián)對象需加*/
width:31em;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使用。*/
}
自動換行:
word-break:break-all;/* 不換行 */
white-space:normal;/* 不換行 */
對于表格文字溢出的定義:
對于表格超出范圍顯示省略號
table{
width:30em;
table-layout:fixed;/* 只有定義了表格的布局算法為fixed,下面td的定義才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使用。*/
}
復制代碼
代碼如下:.text-overflow {
display:block;/*內聯(lián)對象需加*/
width:31em;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使用。*/
}
自動換行:
復制代碼
代碼如下:word-break:break-all;/* 不換行 */
white-space:normal;/* 不換行 */
對于表格文字溢出的定義:
對于表格超出范圍顯示省略號
復制代碼
代碼如下:table{
width:30em;
table-layout:fixed;/* 只有定義了表格的布局算法為fixed,下面td的定義才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使用。*/
}
相關文章
- 在項目中我們經(jīng)常需要在文本過長時顯示,將文本超出的部分內容用省略號代替,基于css代碼是怎么實現(xiàn)的呢?下面腳本之家小編通過分析本文給大家詳解,感興趣的朋友一起學習2016-01-19
- li中的文本超出行寬自動隱藏,在一些新聞類的列表應用中還是比較實用的,具體的實現(xiàn)css樣式如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-09-29
- 連續(xù)的數(shù)字和英文字符常常將容器撐大,挺讓人頭疼。下面與大家分享下CSS如何實現(xiàn)換行的方法,從事web前端的朋友可以看看哦2014-10-17
CSS網(wǎng)頁布局強制換行和強制不換行的屬性講解-CSS教程-網(wǎng)頁制作-網(wǎng)頁教
在CSS網(wǎng)頁布局中,常常會遇到這樣的問題,強制文字換行,而不是在一行內顯示撐開容器影響布局。而有些時候可能會強制內容不換行,多出的部分隱藏掉即可,關于強制不換2008-10-17如何實現(xiàn)FireFox文本自動換行-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
FireFox文本自動換行處理,如何實現(xiàn)FireFox文本自動換行 文本自動換行IE中解決方法: word-wrap:break-word; word-break:break-all; 注:在要換行的內容相應的單元2008-10-17- 這篇文章主要介紹了CSS超出文本指定寬度用省略號代替和文本不換行的相關資料,小編覺的實用性非常,特此分享到腳本之家平臺,供大家參考2016-05-05