CSS中一些常用的文本屬性總結(jié)

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

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

text-overflow

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

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

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

1. text-overflow : clip | ellipsis  

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

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

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

word-wrap

概要：該屬性可以控制換行。當(dāng)屬性取值break-word時(shí)，將強(qiáng)制換行，中文文本沒(méi)有任何問(wèn)題，英文語(yǔ)句也沒(méi)問(wèn)題。但是對(duì)于對(duì)于長(zhǎng)串的英文就不起作用，也就是說(shuō)，word-wrap是控制是否短詞，而不是斷字符

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

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

1. word-wrap: normal | break-word  

normal :默認(rèn)值，瀏覽器只在半角空格或連字符的地方進(jìn)行換行。
break-word: 將內(nèi)容在邊界內(nèi)換行(不截?cái)嘤⑽膯卧~換行)。

其兩者的不同點(diǎn)可以通過(guò)下面的對(duì)比圖進(jìn)行區(qū)別。

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

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

word-break

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

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

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

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

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

white-space

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

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

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

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

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

到此，關(guān)于“CSS中一些常用的文本屬性總結(jié)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

本文標(biāo)題：CSS中一些常用的文本屬性總結(jié)
文章路徑：http://www.jbt999.com/article44/jhdiee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、全網(wǎng)營(yíng)銷推廣、云服務(wù)器、網(wǎng)站導(dǎo)航、企業(yè)建站、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)