久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

        手機(jī)站
        千鋒教育

        千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

        千鋒教育

        掃一掃進(jìn)入千鋒手機(jī)站

        領(lǐng)取全套視頻
        千鋒教育

        關(guān)注千鋒學(xué)習(xí)站小程序
        隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

        當(dāng)前位置:首頁  >  技術(shù)干貨  > 深入了解word-break和 word-wrap的區(qū)別

        深入了解word-break和 word-wrap的區(qū)別

        來源:千鋒教育
        發(fā)布人:wjy
        時(shí)間: 2022-06-02 14:21:00 1654150860

        我們知道,本次內(nèi)容主要是“深入了解 word-break:break-all和 word-wrap:break-word的區(qū)別”,這2個(gè)屬性都是屬于CSS3的屬性,在現(xiàn)在很多文本模塊用到很多,故此寫了這篇文章,和大家交流學(xué)習(xí)。首先我們來了解一下word-break這個(gè)屬性,它的語法如下:

        深入了解word-break和 word-wrap的區(qū)別

        ```text
        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)在來說說另外一個(gè)主角——word-wrap來了,其語法如下:

        ```text
        word-wrap : normal;
        word-wrap: break-word;
        ```

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

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

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

        代碼展示1:

        ```text
        <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">最近有沒有好聽的音樂推薦的?比如我有一首可以推薦的,可以取QQ音樂搜索或者訪問地址:https://aixuxu.com/index/aixuxu.mp3。</div>
        </body>
        ```

         

        代碼展示2:

        ```text
        <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">最近有沒有好聽的音樂推薦的?比如我有一首可以推薦的,可以取QQ音樂搜索或者訪問地址:https://aixuxu.com/index/aixuxu.mp3。
            </div>
        </body>
        ```

         

        綜上所述,word-break: break-all;的作用是所有的都換行,很霸道的那種,毫不留情,一點(diǎn)兒空隙都不放過的那種換行,而 word-wrap:break-word則稍微溫柔點(diǎn)兒,帶有一點(diǎn)憐憫之心,如果這一行文字有可以換行的點(diǎn),如空格之類的,就不打英文單詞或字符的主意了,在這些換行點(diǎn)換行,至于對(duì)不對(duì)齊、好不好看則不關(guān)心,因此,很容易出現(xiàn)一片一片空白區(qū)域的情況。

        這就是這兩個(gè)聲明的區(qū)別所在。此文章供大家交流學(xué)習(xí),文章在內(nèi)容上有參考《CSS世界-張?chǎng)涡瘛芬粫撵`感,歡迎大家交流討論。更多關(guān)于“web前端培訓(xùn)”的問題,歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn),課程大綱更科學(xué)更專業(yè),有針對(duì)零基礎(chǔ)的就業(yè)班,有針對(duì)想提升技術(shù)的提升班,高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。

        tags:
        聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
        10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
        請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
        免費(fèi)領(lǐng)取
        今日已有369人領(lǐng)取成功
        劉同學(xué) 138****2860 剛剛成功領(lǐng)取
        王同學(xué) 131****2015 剛剛成功領(lǐng)取
        張同學(xué) 133****4652 剛剛成功領(lǐng)取
        李同學(xué) 135****8607 剛剛成功領(lǐng)取
        楊同學(xué) 132****5667 剛剛成功領(lǐng)取
        岳同學(xué) 134****6652 剛剛成功領(lǐng)取
        梁同學(xué) 157****2950 剛剛成功領(lǐng)取
        劉同學(xué) 189****1015 剛剛成功領(lǐng)取
        張同學(xué) 155****4678 剛剛成功領(lǐng)取
        鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
        董同學(xué) 138****2867 剛剛成功領(lǐng)取
        周同學(xué) 136****3602 剛剛成功領(lǐng)取
        相關(guān)推薦HOT
        抖音小店運(yùn)營做什么的

        在當(dāng)前的電商市場(chǎng)中,抖音小店已經(jīng)逐漸成為一種新的電商模式,它集成了社交化、音視頻分享、直播銷售等多種功能,使得消費(fèi)者更加便捷地進(jìn)行商品...詳情>>

        2023-10-08 16:36:41
        抖音小店照片要求尺寸多大

        在抖音平臺(tái)開設(shè)小店已經(jīng)成為了越來越多人的選擇,相信大家已經(jīng)在各大社交平臺(tái)上看到有不少小店的推廣。在抖音上,照片是展示產(chǎn)品的重要手段,因...詳情>>

        2023-10-08 16:14:25
        抖音招商團(tuán)長托管服務(wù)費(fèi)怎么退回來

        抖音招商團(tuán)長托管服務(wù)是抖音為有意愿創(chuàng)作內(nèi)容并帶動(dòng)其他創(chuàng)作者成為團(tuán)隊(duì)成員的用戶提供的一種服務(wù)。通過該服務(wù),招商團(tuán)長可以自主組建團(tuán)隊(duì)并得到...詳情>>

        2023-10-08 16:08:53
        抖音小店怎么做代銷

        抖音已經(jīng)成為了一個(gè)非常受歡迎的短視頻應(yīng)用程序,在其中許多用戶都精心打造了自己的小店,用于銷售各種各樣的商品,獲取額外的收入。然而,要想...詳情>>

        2023-10-08 15:28:41
        怎樣開抖音小店帶貨賺錢

        隨著直播帶貨的火熱,越來越多的人開始嘗試通過抖音小店來開展帶貨業(yè)務(wù)。抖音小店是抖音直播帶貨的配套,可以讓用戶在購買直播中產(chǎn)品時(shí)就實(shí)現(xiàn)購...詳情>>

        2023-10-08 15:06:36
        天柱县| 邹城市| 乃东县| 正阳县| 榕江县| 开远市| 城口县| 巨野县| 临安市| 望江县| 临邑县| 武义县| 潮安县| 孝义市| 乌兰县| 富源县| 金乡县| 万盛区| 义乌市| 内黄县| 铜川市| 图们市| 通海县| 湾仔区| 土默特右旗| 乡城县| 霸州市| 天祝| 平顺县| 巩留县| 晋城| 金秀| 富源县| 南华县| 仁怀市| 崇义县| 正蓝旗| 安宁市| 象山县| 那曲县| 麟游县|