css 強制換行

來源:互聯網
上載者:User

標籤:title   隱藏   沒有   ...   css   body   截斷   英文單詞   blog   

css強制換行和超出隱藏實現 

 

 一、強制換行
1 word-break: break-all; 只對英文起作用,以字母作為換行依據。

2 word-wrap: break-word; 只對英文起作用,以單詞作為換行依據。

3 white-space: pre-wrap; 只對中文起作用,強制換行。


word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的內容自動換行,它們的區別在於:

1、word-break:break-all 
假設div寬度為450px,它的內容就會到450px自動換行,如果該行末端有個很長的英文單詞,它會把單詞截斷,一部分保持在行尾,另一部分換到下一行。

2、word-wrap:break-word 
例子與上面一樣,但區別就是它會把整個單詞看成一個整體,如果該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行,而不會把單詞截斷掉。

二、禁止換行 

1 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 
white-space:nowrap; 是禁止換行。
overflow:hidden; 是讓多出的內容隱藏起來,否則多出的內容會撐破容器。
text-overflow:ellipsis; 讓多出的內容以省略符號...來表達。但是這個屬性主要用於IE等瀏覽器,Opera瀏覽器用-o-text-overflow:ellipsis; 而Firefox瀏覽器沒有這個功能,多出的內容只能隱藏起來。

css 強制換行

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.