溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

word-break和word-wrap的區(qū)別是什么

發(fā)布時(shí)間：2022-03-19 09:51:29 來(lái)源：億速云 閱讀：171 作者：iii 欄目：web開(kāi)發(fā)

本篇內(nèi)容介紹了“word-break和word-wrap的區(qū)別是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

首先我們來(lái)了解一下word-break這個(gè)屬性，它的語(yǔ)法如下:

　　word-break: normal;

　　word-break: break-all;

　　word-break : keep-all;

　　它的屬性值一共有3個(gè)，其中的幾個(gè)屬性值的含義具體解釋如下：

　　normal:表示默認(rèn)值，即默認(rèn)的的換行規(guī)則。 break-all:表示強(qiáng)行換行，意思就是允許任意非文本間(比如網(wǎng)址類型的等)的單詞斷行。 keep-all: 也表示換行，但不允許文本中的單詞換行，只能在半角空格或連字符處換行。

　　其中，在這三個(gè)屬性值中，break-all這個(gè)屬性值是所有瀏覽器都支持，但是 keep-all就不這樣了，雖然有一定的發(fā)展和進(jìn)步，但目前移動(dòng)端還不適合使用word-break : keep-all。

　　好了，現(xiàn)在來(lái)說(shuō)說(shuō)另外一個(gè)主角——word-wrap來(lái)了，其語(yǔ)法如下:

　　word-wrap : normal;

　　word-wrap: break-word;

　　其中的幾個(gè)屬性值的含義具體解釋如下： normal:就是默認(rèn)值，就是正常的換行規(guī)則。 break-word:表示一行單詞中實(shí)在沒(méi)有其他靠譜的換行點(diǎn)的時(shí)候才進(jìn)行換行。

　　其實(shí)大家會(huì)發(fā)現(xiàn)，word-break和word-wrap其實(shí)是長(zhǎng)得比較像的，而且屬性值也有類似之處，其實(shí)word-wrap屬性也是很有故事的，它之前由于和 word-break長(zhǎng)得太像，難免會(huì)讓人記不住或搞混，所以在CSS3規(guī)范里，這個(gè)屬性的名稱被修改了，叫作 overflow-wrap。雖然這個(gè)新屬性名稱改了下，顯得語(yǔ)義更準(zhǔn)確，但也更容易區(qū)別和記憶。另外，在 Chrome和 Safari等WebKit內(nèi)核的瀏覽器僅支持這個(gè)新屬性。因此，雖然換了個(gè)好看好用的新名字，但是為了兼容性，目前還是乖乖地使用word-wrap 吧。

　　下面繼續(xù)來(lái)嘮嘮這連個(gè)屬性的到底有啥區(qū)別呢？word-break: break-all和 word-wrap: break-word。首先，兩者長(zhǎng)相神似，都有 word，都有break，位置都還一樣，一個(gè)有兩個(gè)break，一個(gè)有兩個(gè)word;其次，兩者的功能作用也類似，這兩個(gè)聲明都能使連續(xù)英文字符換行，那么它們的區(qū)別到底是什么? 下面給大家舉個(gè)例子說(shuō)明一下：dsdfsfdsfsf

　　代碼展示1：

　　<style type="text/css">

　　*{

　　margin: 0;

　　padding: 0;

　　}

　　.box{

　　width: 200px;

　　height: 200px;

　　background: orange;

　　margin: 100px auto;

　　padding: 20px;

　　word-break: break-all;

　　}

　　</style>

　　<body>

　　<div class="box"></div>

　　</body>

　　代碼展示2：

　　<style type="text/css">

　　*{

　　margin: 0;

　　padding: 0;

　　}

　　.box{

　　width: 200px;

　　height: 200px;

　　background: orange;

　　margin: 100px auto;

　　padding: 20px;

　　word-wrap: break-word;

　　}

　　</style>

　　<body>

　　<div class="box">

　　</div>

　　</body>

“word-break和word-wrap的區(qū)別是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手