CSS自動換行、強制不換行、強制斷行、超出顯示省略號

時間 2019-12-11

標籤 css 自動換行強制斷行超出顯示省略號欄目 CSS 简体版

原文原文鏈接

轉自：https://blog.csdn.net/liuyan19891230/article/details/50969393css

P標籤是默認是自動換行的，所以設置好寬度以後，可以較好的實現效果，可是最近的項目中發現，使用ajax加載數據以後，p標籤內的內容沒有換行，致使佈局錯亂，因而嘗試着使用換行樣式，雖然解決了問題，可是並無發現本質緣由，本質在於，我當時獲取的數據是一長串的數字，瀏覽器應該是對數字和英文單詞處理方式相近，不會截斷。
先給出各類方式，再具體介紹每個屬性。
強制不換行
p { white-space:nowrap; } html

自動換行
p { word-wrap:break-word; } ajax

強制英文單詞斷行
p { word-break:break-all; } 瀏覽器

*注意：設置強制將英文單詞斷行，須要將行內元素設置爲塊級元素。markdown

超出顯示省略號
p{text-overflow:ellipsis;overflow:hidden;}佈局

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space 屬性設置如何處理元素內的空白
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行爲方式相似 HTML 中的 pre 標籤。
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 br 標籤爲止。
pre-wrap 保留空白符序列，可是正常地進行換行。
pre-line 合併空白符序列，可是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。post

word-wrap: normal|break-word;
word-wrap 屬性用來標明是否容許瀏覽器在單詞內進行斷句，這是爲了防止當一個字符串太長而找不到它的天然斷句點時產生溢出現象。
normal: 只在容許的斷字點換行(瀏覽器保持默認處理)
break-word:在長單詞或URL地址內部進行換行
word-break: normal|break-all|keep-all;網站

word-break 屬性用來標明怎麼樣進行單詞內的斷句。
normal：使用瀏覽器默認的換行規則。
break-all:容許再單詞內換行
keep-all:只能在半角空格或連字符處換行ui

舉例看起區別：編碼

<!doctype html>
<html lang="en">
    <head>
    <!--網站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="Keywords" content="關鍵詞一，關鍵詞二">
        <meta name="Description" content="網站描述內容">
        <meta name="Author" content="Yvette Lau">
        <title>Document</title>
        <!--css js 文件的引入-->
        <style>
            .word{background:#E4FFE9;width:250px;margin:50px auto;padding:20px;font-family:"microsoft yahei";}
            /* 強制不換行 */
            .nowrap{white-space:nowrap;}
            /* 容許單詞內斷句，首先會嘗試挪到下一行，看看下一行的寬度夠不夠，
            不夠的話就進行單詞內的斷句 */
            .breakword{word-wrap: break-word;}
            /* 斷句時，不會把長單詞挪到下一行，而是直接進行單詞內的斷句 */
            .breakAll{word-break:break-all;}            
            /* 超出部分顯示省略號 */
            .ellipsis{text-overflow:ellipsis;overflow:hidden;}
        </style>
    </head>
    <body>
        <div class = "word">
            <p class = "nowrap">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs</p>          
            <p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>
            <p class = "breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>
            <p class = "normal">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>
            <p class = "ellipsis">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>
        </div>
    </body>
</html>

效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。