我們在做前端時，經(jīng)常會要求文字只在一行顯示。當一行文字超過DIV或者Table的寬度的時候，瀏覽器中默認是讓它換行顯示的，如果不想讓他換行要怎么辦呢？通過CSS中的word-break,white-space可以達到不換行的效果。

用CSS讓文字在一行內(nèi)顯示不換行的方法

一般的文字截斷(適用于內(nèi)聯(lián)與塊)：

.text-overflow{

display:block;?????????????/*內(nèi)聯(lián)對象需加*/

width:31em;

word-break:keep-all;???????/* 不換行 */

white-space:nowrap;????????/* 不換行 */

overflow:hidden;???????????/* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */

text-overflow:ellipsis;????/*溢出時顯示省略標記...；需與overflow:hidden;一起使用*/

}

對于表格，定義有點不一樣：

table{

width:30em;

table-layout:fixed;??????/*只有定義了表格的布局算法為fixed，下面td的定義才能起作用*/

}

td{

width:100%;

word-break:keep-all;?????/* 不換行 */

white-space:nowrap;??????/* 不換行 */

overflow:hidden;?????????/* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */

text-overflow:ellipsis;??/* 溢出時顯示省略標記...；需與overflow:hidden;一起使用*/

}

注：這個只對單行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 這個寫法只有IE會有"..."，其它的瀏覽器文本超出指定寬度時會隱藏。

聲明:如需轉(zhuǎn)載，請注明來源于www.webym.net并保留原文鏈接：http://www.webym.net/jiaocheng/7.html

總結(jié)

以上是生活随笔為你收集整理的html怎么设置只显示一行,如何利用CSS控制文本只在一行显示(不换行)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。