在我們開發(fā)網(wǎng)站的過程中常常會遇到文本被強制換行的情況發(fā)生颤介,比如:
圖中一個完整的
a
標簽被活生生截斷(強制換行),這往往不是我們所想要的袜漩,但是這也是我們無法避免的通殃,因為在網(wǎng)站開發(fā)過程中度液,我們往往無法做到精確計算出能夠完美展示所容納文本格式的空間大小。
遇到這種情況一般的處理思路要么想辦法算距離画舌,要么一點一點的調(diào)節(jié)以達到預(yù)期要求堕担,但是,這樣做既費時又費力曲聂,那么有什么辦法能一勞永逸呢霹购?
其實 CSS 為我們提供了 white-space
屬性
通過設(shè)置
a{white-space:nowrap;}
可以規(guī)定一個完整的 a
標簽中的文本不進行換行,修改后的效果如圖:
當然不僅僅是
a
標簽朋腋,在開發(fā)過程中我們可以對任意的一個文本整體設(shè)定這一屬性齐疙,這樣一來便不會出現(xiàn)一個整體被截斷的情況了。
下面對 white-space
屬性做一個小結(jié):
white-space 屬性指定元素內(nèi)的空白怎樣處理旭咽。
屬性值
值 | 描述 |
---|---|
normal | 默認贞奋。空白會被瀏覽器忽略穷绵。 |
pre | 空白會被瀏覽器保留轿塔。其行為方式類似 HTML 中的 <pre> 標簽。 |
nowrap | 文本不會換行,文本會在在同一行上繼續(xù)催训,直到遇到 <br> 標簽為止洽议。 |
pre-wrap | 保留空白符序列宗收,但是正常地進行換行漫拭。 |
pre-line | 合并空白符序列,但是保留換行符混稽。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值采驻。 |