word-break: break-all;、word-break: keep-all; 、word-wrap: break-word;和white-space:nowrap;都有什麼做用

時間 2019-11-12

標籤 word break wrap white space nowrap 都有什麼欄目 Microsoft Office 简体版

原文原文鏈接

小穎最近心情很差，心情很差就容易作傻事，因此昨天就幹了件傻事css

小穎昨天腦子一抽去拔罐了，拔完我就~~~~~~~~~~~~疼死寶寶了，昨晚一晚都沒睡好，都不敢平躺，難受一夜，早上到公司後困得啊，也是傻得沒誰了。html

好啦言歸正傳，今天小穎給你們分享下，小穎理解的word-break: break-all;、word-break: keep-all; 、word-wrap: break-word;和white-space:nowrap;。下面就一塊兒來看看代碼吧!web

先看看頁面效果圖吧：ide

html代碼：

<body>
    <div class="main">
        <div class="txt-one">
            <div class="no-word-break-ch">
                伴隨着中國移動(微博)成功牽頭5G系統設計，其4G用戶的規模也達到了驚人的數量。在今日舉行的第七屆全球移動寬帶論壇（Global Mobile Broadband
                 Forum如下簡稱MBBF）上，中國移動總裁李躍透露，截至目前，中國移動4G用戶已突破500億戶。
            </div>
            <div class="word-break-ch">
                伴隨着中國移動(微博)成功牽頭5G系統設計，其4G用戶的規模也達到了驚人的數量。在今日舉行的第七屆全球移動寬帶論壇（Global Mobile Broadband
                 Forum如下簡稱MBBF）上，中國移動總裁李躍透露，截至目前，中國移動4G用戶已突破500億戶。
            </div>
        </div>
        <div class="txt-two">
            <div class="no-word-break-eg">
                Along with China mobile (weibo) success led 5 g system design, the size of its 4 g users reached a surprising number. Held today in the 7th Global Mobile Broadband BBS (Global Mobile Broadband Forum, hereinafter referred to as MBBF), China Mobile's chairman,
                Mr Li said so far, China Mobile's 4 g users has exceeded 500 million.
            </div>
            <div class="word-break-eg">
                Along with China mobile (weibo) success led 5 g system design, the size of its 4 g users reached a surprising number. Held today in the 7th Global Mobile Broadband BBS (Global Mobile Broadband Forum, hereinafter referred to as MBBF), China Mobile's chairman,
                Mr Li said so far, China Mobile's 4 g users has exceeded 500 million.
            </div>
        </div>
        <div class="txt-three">
            <div class="no-word-warp-ch">
                IHSTechnology中國研究總監王陽表示，今年好幾個大的手機廠商都虧得厲害，明年越虧越多，挺不住的就得倒掉一個多月來，人民幣匯率猶如坐上了滑 梯，一路400滑下，在即將跌至6.90關口之時，人民幣對美圓中間價結束了12連跌的戲碼。
            </div>
            <div class="word-warp-ch">
                IHSTechnology中國研究總監王陽表示，今年好幾個大的手機廠商都虧得厲害，明年越虧越多，挺不住的就得倒掉一個多月來，人民幣匯率猶如坐上了滑 梯，一路400滑下，在即將跌至6.90關口之時，人民幣對美圓中間價結束了12連跌的戲碼。
            </div>
        </div>
        <div class="txt-four">
            <div class="no-word-warp-eg">
                IHSTechnology China research director wang Yang said that this year several big handset manufacturers are luckily, lost more more next year, is not have to pour out In more than a month, the RMB exchange rate is on the slide, slide down all the way, in
                the 6.90 mark, the yuan central parity rate against the dollar over 12 losses of drama.
            </div>
            <div class="word-warp-eg">
                IHSTechnology China research director wang Yang said that this year several big handset manufacturers are luckily, lost more more next year, is not have to pour out In more than a month, the RMB exchange rate is on the slide, slide down all the way, in
                the 6.90 mark, the yuan central parity rate against the dollar over 12 losses of drama.
            </div>
        </div>
    </div>

</body>

css代碼：

    <style media="screen">
        .main {
            width: 600px;
            margin: 0 auto;
        }

        .txt-one,
        .txt-two,
        .txt-three,
        .txt-four {
            overflow: hidden;
        }

        .txt-one {
            background-color: #aaeeee;
        }

        .txt-two {
            background-color: rgba(244, 67, 54, 0.38);
        }

        .txt-three {
            background-color: rgba(238, 232, 170, 0.92);
        }

        .txt-four {
            background-color: rgba(33, 150, 243, 0.86);
        }

        .no-word-break-ch,
        .word-break-ch,
        .no-word-break-eg,
        .word-break-eg,
        .no-word-warp-ch,
        .word-warp-ch,
        .no-word-warp-eg,
        .word-warp-eg {
            width: 290px;
            float: left;
        }

        .no-word-break-ch,
        .no-word-break-eg,
        .no-word-warp-ch,
        .no-word-warp-eg {
            padding-right: 15px;
        }

        .word-break-ch,
        .word-break-eg {
          word-break: break-all;
          /*容許任意非CJK(Chinese/Japanese/Korean)文本間的單詞斷行。*/
          word-break: keep-all;
          /*不容許CJK(Chinese/Japanese/Korean)文本中的單詞換行，只能在半角空格或連字符處換行。非CJK文本的行爲實際上和normal一致。*/
        }

        .word-warp-ch,
        .word-warp-eg {
            word-wrap: break-word;
            /*內容將在邊界內換行。若是須要，單詞內部容許斷行。*/
            /*white-space:nowrap;     用於處理元素內的空白，使得元素裏的內容只在一行內顯示。*/}
    </style>

咱們先來看看word-break: break-all;和word-break: keep-all;

圖（1）this

圖（2）spa

圖1是word-break: break-all; 容許任意非CJK(Chinese/Japanese/Korean)文本間的單詞斷行。設計

圖2是word-break: keep-all; 不容許CJK(Chinese/Japanese/Korean)文本中的單詞換行，只能在半角空格或連字符處換行。非CJK文本的行爲實際上和normal一致。3d

圖中的左側div小穎沒有給其加 word-break 樣式，你們經過對比能夠看出圖1中給div設置了 word-break: break-all; 後div裏面的內容中文右側和左側對比發現數字500部分換行顯示；英文右側和左側對比發現英語單詞 success、surprising、Global、Mobile、referred等英文單詞由於當前行顯示不完，直接將顯示不完的部分換行顯示，而沒有整個單詞換行顯示。code

圖2 中給div 設置了 word-break: keep-all; ，只能在半角空格或連字符處換行，好比：伴隨着中國移動(微博)成功牽頭5G系統設計，這段話由於太長因此，在「）」處換行。當小穎將「)」刪除後，這段話則在「(」處換行，再好比中國移動總裁李躍透露，這段話在 Forum如下簡稱MBBF）上，以後但因中國移動總裁李躍透露，這段話太長因此在「，」處換行。orm