国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS3 文本換行

EasonTyler / 2228人閱讀

摘要：文本換行其實(shí)是個(gè)非常常用但并不起眼的特性。在中日韓文情況下，和有區(qū)別，見下圖中日韓文情況下，仍舊等于沒有設(shè)，瀏覽器選擇在文字或標(biāo)點(diǎn)符號(hào)處換行。但設(shè)成后，將不再允許斷詞哪怕是中日韓文，只能像英語系一樣根據(jù)半角空格或標(biāo)點(diǎn)來換行。

文本換行其實(shí)是個(gè)非常常用但并不起眼的特性。你什么都不用設(shè)，瀏覽器自動(dòng)就會(huì)換行。例如英語，瀏覽器會(huì)根據(jù)容器尺寸，選擇在半角空格或連字符處換行。例如中文，瀏覽器會(huì)選擇在文字或標(biāo)點(diǎn)符號(hào)處換行。但有時(shí)遇到長單詞或URL瀏覽器就沒這么智能了，會(huì)出現(xiàn)撐破容器的現(xiàn)象，很難看，如下圖

容器定寬150px的前提下，普通文字如左圖瀏覽器足以勝任自動(dòng)換行，右圖遇見長單詞或URL，瀏覽器就力不從心了。當(dāng)然，你能為容器設(shè)置overflow:auto;，讓滾動(dòng)條出現(xiàn)，以避免撐破容器?；蚋纱鄌verflow:hidden;讓超出部分隱藏，見下圖

但總感覺overflow不太理想，應(yīng)該有換行專用的屬性。本篇就介紹一下3種換行的屬性

word-wrap
word-break
white-space
word-wrap
word-wrap能實(shí)現(xiàn)斷詞換行?？稍O(shè)normal，break-word。默認(rèn)值normal等于沒設(shè)，不贅述。break-word允許斷詞換行。如右圖設(shè)了word-wrap: break-word;后，瀏覽器的執(zhí)行過程：發(fā)現(xiàn)長單詞顯示不下，根據(jù)默認(rèn)的換行規(guī)則，用半角空格換行，因此Ooops too后面空出了一段空白，長單詞移到第二行發(fā)現(xiàn)仍舊顯示不下，于是斷詞換行，長單詞和URL因此被中間截?cái)唷?/p>

word-break
word-break可以設(shè)置瀏覽器自動(dòng)換行的方式?？稍O(shè)normal，break-all，keep-all。默認(rèn)值normal等于沒設(shè)，不贅述。break-all將瀏覽器的換行模式設(shè)為根據(jù)容器尺寸允許斷詞換行。和上面word-wrap: break-word;有什么區(qū)別呢？看下圖，藍(lán)線部分。

左圖word-wrap的break-word是沿用瀏覽器默認(rèn)的換行方式，因此“Ooops too”后面空出了一段空白，上面有解釋，不贅述。右圖word-break的break-all是改變?yōu)g覽器默認(rèn)的換行方式，讓瀏覽器無視半角空格，直接根據(jù)容器尺寸換行，因此遇到長單詞時(shí)，直接斷詞換行。效果上看word-break: break-all;比word-wrap: break-word;更節(jié)省頁面空間。

keep-all不允許斷詞，在英語系情況下等同于normal，等同于沒有設(shè)。在中日韓文情況下，normal和keep-all有區(qū)別，見下圖

中日韓文情況下，normal仍舊等于沒有設(shè)，瀏覽器選擇在文字或標(biāo)點(diǎn)符號(hào)處換行。但設(shè)成keep-all后，將不再允許斷詞（哪怕是中日韓文），只能像英語系一樣根據(jù)半角空格或標(biāo)點(diǎn)來換行。
white-space

white-space設(shè)置空白符和換行符?？稍O(shè)默認(rèn)值normal，可設(shè)pre， nowrap，pre-line，pre-wrap。效果見下圖

//xxx替換相應(yīng)的值
Ooops too loooooooooooooooooooooong!

首先勝出四場的球隊(duì)將獲得NBA總冠軍。

normal，瀏覽器默認(rèn)會(huì)忽略多余空白符（要想顯示多個(gè)空白符，請(qǐng)用?代替空格鍵）和換行符。

pre會(huì)保留空白符和換行符，相當(dāng)于

標(biāo)簽。要消除第一行這個(gè)換行符，常見在HTML端改成下面這樣以便去掉多余空行


Ooops too loooooooooooooooooooooong!
首先勝出四場的球隊(duì)將獲得NBA總冠軍。


//或者


 Ooops too loooooooooooooooooooooong!
首先勝出四場的球隊(duì)將獲得NBA總冠軍。

nowrap和normal的區(qū)別是，它不會(huì)自動(dòng)換行。當(dāng)你用text-overflow屬性時(shí)需要配合white-space: nowrap;和overflow: hidden;才能起作用


pre-line會(huì)忽略多余空白符（要想顯示多個(gè)空白符，請(qǐng)用?代替空格鍵），但保留換行符，會(huì)自動(dòng)換行


pre-wrap和pre-line的區(qū)別是，它會(huì)保留多余空白符


總結(jié)
標(biāo)簽里展示源代碼時(shí)，遇到有url屬性時(shí)會(huì)很長，導(dǎo)致?lián)纹祈撁妫ㄓ绕涫且苿?dòng)端），可以用white-space: pre-wrap;加上word-wrap: break-word;


標(biāo)簽外常見的強(qiáng)制換行方式是overflow:hidden;加上word-wrap: break-word;


強(qiáng)制不換行可以white-space: nowrap;加上word-break: keep-all;


更多技術(shù)請(qǐng)關(guān)注：http://www.quzhuanpan.com/q_f...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115428.html

相關(guān)文章

  • 圖解CSS3讀書筆記 文本與顏色

    摘要：將內(nèi)容在邊界內(nèi)換行不截?cái)嘤⑽膯卧~換行語法瀏覽器只在半角空格或連字符的地方進(jìn)行換行。個(gè)人感覺跟類似強(qiáng)行截?cái)嘤⑽膯卧~，達(dá)到詞內(nèi)換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強(qiáng)制對(duì)文本使用同一尺寸,僅火狐支持), font...

    lvzishen 評(píng)論0 收藏0

  • CSS3 文本換行

    摘要：文本換行其實(shí)是個(gè)非常常用但并不起眼的特性。在中日韓文情況下，和有區(qū)別，見下圖中日韓文情況下，仍舊等于沒有設(shè)，瀏覽器選擇在文字或標(biāo)點(diǎn)符號(hào)處換行。但設(shè)成后，將不再允許斷詞哪怕是中日韓文，只能像英語系一樣根據(jù)半角空格或標(biāo)點(diǎn)來換行。 文本換行其實(shí)是個(gè)非常常用但并不起眼的特性。你什么都不用設(shè)，瀏覽器自動(dòng)就會(huì)換行。例如英語，瀏覽器會(huì)根據(jù)容器尺寸，選擇在半角空格或連字符處換行。例如中文，瀏覽器會(huì)選擇...

    chinafgj 評(píng)論0 收藏0

  • css3整理

    W3C的CSS3規(guī)范仍在開發(fā)，但是，許多新的CSS3屬性已在現(xiàn)代瀏覽器使用 CSS3邊框 border-radius border-top-left-radius: 2em 0.5em box-shadow:x-shadow y-shadow blur spread(陰影尺寸，可選) color inset(outset外部陰影，可選) border-image border-im...

    X1nFLY 評(píng)論0 收藏0

  • CSS3學(xué)習(xí)筆記

    摘要：在動(dòng)畫過程中，您能夠多次改變這套樣式。以百分比來規(guī)定改變發(fā)生的時(shí)間，或者通過關(guān)鍵詞和，等價(jià)于和。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義和選擇器。注釋請(qǐng)使用動(dòng)畫屬性來控制動(dòng)畫的外觀，同時(shí)將動(dòng)畫與選擇器綁定。CSS3 被劃分為模塊 其中最重要的 CSS3 新增實(shí)用模塊包括： 背景和邊框 文本效果 2D/3D 轉(zhuǎn)換 動(dòng)畫 多列布局 用戶界面 CSS3 邊框: 　　用于創(chuàng)建圓角 border...

    wenshi11019 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<