CSS怎么設置文字強制不換行?


css怎么設置文字強制不換行?本篇文章就給大家介紹css設置文字(特別是連續的數字和英文)強制不換行的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有所幫助。

 

 

下面我們通過簡單的代碼示例給大家介紹css設置文字的強制不換行,且超出部分隱藏的方法

html代碼:

<div> <p>This is a long Wordddddddddddddddddddddddddddddddddddddddd!</p> <p>This is a long Wordddddddddddddddddddddddddddddddddddddddd!</p> </div>

css代碼:

.demo .wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

豌豆資源搜索網站https://55wd.com 電腦刺綉綉花廠 ttp://www.szhdn.com

說明:

● white-space:nowrap; 設置文字禁止換行(強制不換行)。

white-space屬性設置如何處理元素內的空白,而nowrap值設置文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止。

● overflow:hidden; 設置把多余內容隱藏起來,不讓多出來的內容撐破容器。

● text-overflow:ellipsis; 設置多出的內容以省略號…來表達。

注:text-overflow:ellipsis; 屬性主要是用於IE等瀏覽器中,Opera瀏覽器要考慮兼容性,使用-o-text-overflow:ellipsis; 才可以實現效果;而在Firefox瀏覽器中就沒有這個功能了,只能把多出的內容隱藏起來。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM