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

資訊專欄INFORMATION COLUMN

CSS3 文本換行

chinafgj / 1646人閱讀

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

文本換行其實是個非常常用但并不起眼的特性。你什么都不用設，瀏覽器自動就會換行。例如英語，瀏覽器會根據容器尺寸，選擇在半角空格或連字符處換行。例如中文，瀏覽器會選擇在文字或標點符號處換行。但有時遇到長單詞或URL瀏覽器就沒這么智能了，會出現撐破容器的現象，很難看，如下圖

容器定寬150px的前提下，普通文字如左圖瀏覽器足以勝任自動換行，右圖遇見長單詞或URL，瀏覽器就力不從心了。當然，你能為容器設置overflow:auto;，讓滾動條出現，以避免撐破容器。或干脆overflow:hidden;讓超出部分隱藏，見下圖

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

word-wrap
word-break
white-space
word-wrap
word-wrap能實現斷詞換行。可設normal，break-word。默認值normal等于沒設，不贅述。break-word允許斷詞換行。如右圖設了word-wrap: break-word;后，瀏覽器的執行過程：發現長單詞顯示不下，根據默認的換行規則，用半角空格換行，因此Ooops too后面空出了一段空白，長單詞移到第二行發現仍舊顯示不下，于是斷詞換行，長單詞和URL因此被中間截斷。

word-break
word-break可以設置瀏覽器自動換行的方式。可設normal，break-all，keep-all。默認值normal等于沒設，不贅述。break-all將瀏覽器的換行模式設為根據容器尺寸允許斷詞換行。和上面word-wrap: break-word;有什么區別呢？看下圖，藍線部分。

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

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

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

white-space設置空白符和換行符。可設默認值normal，可設pre， nowrap，pre-line，pre-wrap。效果見下圖

//xxx替換相應的值
Ooops too loooooooooooooooooooooong!

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

normal，瀏覽器默認會忽略多余空白符（要想顯示多個空白符，請用?代替空格鍵）和換行符。

pre會保留空白符和換行符，相當于

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


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


//或者


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

nowrap和normal的區別是，它不會自動換行。當你用text-overflow屬性時需要配合white-space: nowrap;和overflow: hidden;才能起作用


pre-line會忽略多余空白符（要想顯示多個空白符，請用?代替空格鍵），但保留換行符，會自動換行


pre-wrap和pre-line的區別是，它會保留多余空白符


總結
標簽里展示源代碼時，遇到有url屬性時會很長，導致撐破頁面（尤其是移動端），可以用white-space: pre-wrap;加上word-wrap: break-word;


標簽外常見的強制換行方式是overflow:hidden;加上word-wrap: break-word;


強制不換行可以white-space: nowrap;加上word-break: keep-all;


更多技術請關注：http://www.quzhuanpan.com/q_f...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50286.html

相關文章

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

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

    lvzishen 評論0 收藏0

  • CSS3 文本換行

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

    EasonTyler 評論0 收藏0

  • css3整理

    W3C的CSS3規范仍在開發，但是，許多新的CSS3屬性已在現代瀏覽器使用 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 評論0 收藏0

  • CSS3學習筆記

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

    wenshi11019 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<