逼自己說幾句
自己對于文本在塊級元素中如何排列的一直不太懂，單詞如何換行，是否可以設(shè)置換行的機(jī)制，代碼中單詞與單詞間的空白是否能保留，如何保留如何設(shè)置，好吧，其實要想了解這些特性,必須全面了解一下三個屬性,word-wrap word-break white-space,請看文章
word-wrap (CSS3新增)
身在塊級元素的行內(nèi)元素的文本碰到塊級元素的邊界時，會自動換行，這個我們都知道
如果塊級元素中存在一個比較坑爹的長單詞，會怎么辦呢
HTML
<div class="mydiv">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.</div>
CSS
.mydiv {
width: 100px;
border: 3px solid red;
}
這種場景下比較尷尬，行內(nèi)元素的文本跑出去了
其實,我們可以用overflow: auto或者干脆overflow:hidden來避免這種尷尬,但是不優(yōu)雅,利用CSS3的word-wrap就可以避免了
word-wrap屬性有兩個值
- normal (默認(rèn)值)
- break word
來看看添加了word-wrap: break-word后的效果吧
能不能讓短單詞也強(qiáng)制換行呢,這樣的排版更整齊一些
word-break (CSS3新增)
word-break屬性有三個值
- normal (默認(rèn))
- break-all
- keep-all
break-all可以強(qiáng)行階段英文單詞,達(dá)到詞內(nèi)換行的效果
來看看添加了word-break: break-all的效果吧
keep-all比默認(rèn)的normal更加保守,它指定只有在文本里的遇到空格,標(biāo)點符號以及連字符的時候才會換行
綜上所述,對于文本來說,最好的處理方式是行內(nèi)換行,而不是詞內(nèi)換行,比如這樣
word-wrap: break-word;
overflow: hidden;
換行機(jī)制了解過后,也該研究研究文本內(nèi)的空白的保留機(jī)制
white-space
white-space有這么幾個值
normal (默認(rèn))
pre
no-wrap
pre-line
pre-wrap
inherit
normal: 空白處會被瀏覽器忽略(無論打多少空格或者回車瀏覽器指揮顯示出一個空格),如下圖所示:
1. pre: 空白處會被瀏覽器保留，其行為方式就類似于HTML中的<pre>標(biāo)簽
2. nowrap: 文本不會換行，文本會在同一行上，直到碰到了換行標(biāo)簽<br />為止
3. pre-line: 合并空白符序列，但保留換行符
4. pre-wrap: 保留空白符序列，但是正常進(jìn)行換行
好像這么看并不能區(qū)分出pre和pre-wrap的區(qū)別,那就上個例子吧
HTML
<div class="mydiv pre"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="mydiv pre-wrap"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
CSS
.mydiv {
width: 300px;
border: 3px solid #aaa;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
就是這樣
參考文獻(xiàn)
（完）
文檔信息
- 自由轉(zhuǎn)載-非商用-非衍生-保持署名
- 發(fā)表日期：2016年9月18日
