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


一、P標簽是默認是自動換行的,因此設置好寬度之后,能夠較好的實現效果

        但是對於一串的數字或者單詞卻不具有這樣的格式優勢

二、各種方式 

  強制不換行:p { white-space:nowrap; }

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

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

  *注意:設置強制將英文單詞斷行,需要將行內元素設置為塊級元素。

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

  1、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 屬性的值。

   2、word-wrap: normal|break-word;

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

   3、word-break: normal|break-all|keep-all;

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM