歡迎來到培訓(xùn)無憂網(wǎng)！

全國切換

咨詢熱線 400-001-5729

位置：培訓(xùn)無憂網(wǎng) > 新聞資訊 > 電腦/IT > web前端 >  web前端：CSS3中word-break和word-wra

web前端：CSS3中word-break和word-wra

來源：培訓(xùn)無憂網(wǎng)-星星 發(fā)布人：星星

2021-11-30 16:02:59|已瀏覽：242次

CSS3中word-break和word-wrap有什么區(qū)別？

word-break

      word-break它的屬性值一共有3個，其中的幾個屬性值的含義具體解釋如下：
      normal:表示默認(rèn)值，即默認(rèn)的的換行規(guī)則。 break-all:表示強(qiáng)行換行，意思就是允許任意非文本間(比如網(wǎng)址類型的等)的單詞斷行。 keep-all: 也表示換行，但不允許文本中的單詞換行，只能在半角空格或連字符處換行。
       其中，在這三個屬性值中，break-all這個屬性值是所有瀏覽器都支持，但是 keep-all就不這樣了，雖然有一定的發(fā)展和進(jìn)步，但目前移動端還不適合使用word-break : keep-all。
word-wrap
      它有兩個屬性值，其中的幾個屬性值的含義具體解釋如下： normal:就是默認(rèn)值，就是正常的換行規(guī)則。 break-word:表示一行單詞中實在沒有其他靠譜的換行點的時候才進(jìn)行換行。

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

       本文由培訓(xùn)無憂網(wǎng)千鋒教育課程顧問老師整理發(fā)布，更多網(wǎng)頁制作培訓(xùn)課程信息可關(guān)注培訓(xùn)無憂網(wǎng)web前端培訓(xùn)頻道或添加老師微信：15033336050

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://elsolbar.com/news-id-5648.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實性請自行核實或聯(lián)系我們，了解更多相關(guān)資訊請關(guān)注break和word頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費申請試課。關(guān)注官方微信了解更多：150 3333 6050

留下你的信息,課程顧問老師會一對一幫助你規(guī)劃更適合你的專業(yè)課程!

  • 姓名：

  • 手機(jī)：

  • 地區(qū)：

  • 想學(xué)什么：

  • 培訓(xùn)無憂網(wǎng)
免 費 申 請 試 聽
提交申請，《培訓(xùn)無憂網(wǎng)》課程顧問老師會一對一幫助你規(guī)劃更適合你的專業(yè)課程！