這篇文章主要介紹“CSS中一些常用的文本屬性總結(jié)”，在日常操作中，相信很多人在CSS中一些常用的文本屬性總結(jié)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS中一些常用的文本屬性總結(jié)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)由有經(jīng)驗的網(wǎng)站設(shè)計師、開發(fā)人員和項目經(jīng)理組成的專業(yè)建站團隊，負(fù)責(zé)網(wǎng)站視覺設(shè)計、用戶體驗優(yōu)化、交互設(shè)計和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站建設(shè)、成都網(wǎng)站制作易于使用并且具有良好的響應(yīng)性。

text-overflow

概要：其作用是解決文本溢出時，其展現(xiàn)的形式

該屬性有兩個參數(shù)，分別如下：

CSS Code復(fù)制內(nèi)容到剪貼板

1. text-overflow : clip | ellipsis  

clip:不顯示省略標(biāo)記(....),溢出的文本會被的裁減掉。
ellipsis：文本溢出時會顯示省略的標(biāo)記(...),插入的位置是最后一個字符。

要使該屬性起作用，還得具備以下幾個條件。

    width | max-width：明確給需要截取文本的容器設(shè)置寬度值。
    white-space:nowrap：給文本容器設(shè)置強制不換行，讓元素文本在一行內(nèi)顯示。
    overflow:hidden：設(shè)置容器文本溢出時隱藏。

word-wrap

概要：該屬性可以控制換行。當(dāng)屬性取值break-word時，將強制換行，中文文本沒有任何問題，英文語句也沒問題。但是對于對于長串的英文就不起作用，也就是說，word-wrap是控制是否短詞，而不是斷字符

該屬性有兩個參數(shù)，分別如下：

CSS Code復(fù)制內(nèi)容到剪貼板

1. word-wrap: normal | break-word  

normal :默認(rèn)值，瀏覽器只在半角空格或連字符的地方進行換行。
break-word: 將內(nèi)容在邊界內(nèi)換行(不截斷英文單詞換行)。

其兩者的不同點可以通過下面的對比圖進行區(qū)別。

由圖可知：當(dāng)word-wrap值為normal時，超長的英文文本長度大于容器的寬度時會撐破容器伸展到容器的外面（IE6除外，IE6會自動拓展容器的寬度）。在設(shè)置了break-word時，長文本會自動換行，不足的是，它不會安裝單詞換行，可能會將一個單詞截斷換行。

同時，word-wrap應(yīng)用在pre或者table中時，將不會起作用。

word-break

概要：屬性主要針對亞洲語言和非亞洲語言進行控制換行。當(dāng)屬性取值break-all時，可以允許非亞洲語言文本行的任意字內(nèi)斷開；當(dāng)屬性值為keep-all時，表示在中文、韓文、日文中是不允許字?jǐn)嚅_的。

該屬性的參數(shù)有三個，其值如下所示：

CSS Code復(fù)制內(nèi)容到剪貼板

1. word-break: normal | break-all | keep-all  

normal：默認(rèn)值，根據(jù)語言自己的規(guī)則來確定換行方式，中文到邊界上的漢字換行，英文從整個單詞換行。
break-all：可以強行截斷英文單詞，達(dá)到詞內(nèi)換行效果。
keep-all：不允許字?jǐn)嚅_。如果是中文把前后標(biāo)點符合內(nèi)的一個漢字短語整個換行，英文單詞整個換行；如果出現(xiàn)某個英文字符長度超過容器邊界，后面的部分將撐破容器，如果邊框為固定屬性，則后面的部分無法顯示。(PS:chrome該屬性無效，但是新增break-word屬性)

white-space

概要：性具有格式化文本的作用，當(dāng)屬性取值為nowrap時，表示強制在同意行內(nèi)顯示所有文本；當(dāng)屬性值為pre時，表示顯示預(yù)定義文本格式。

該屬性有以下的取值情況：

CSS Code復(fù)制內(nèi)容到剪貼板

1. whitewhite-space: normal | pre | nowrap | pre-line | pre-wrap  

normal：默認(rèn)值，空白會被瀏覽器忽略
pre：空白會被保留，呈現(xiàn)預(yù)定義文本格式
nowrap：文本不會換行，文本會在一行顯示
pre-line：合并空白符序列，但保留換行符。
pre-wrap：保留空白符序列，但是正常進行換行。

到此，關(guān)于“CSS中一些常用的文本屬性總結(jié)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
當(dāng)前名稱：CSS中一些常用的文本屬性總結(jié)
地址分享：http://weahome.cn/article/jhdiee.html