css+html關於文字的總結（整理中）

佈局1：固定行數

<div>
    <p>示例文字示例文字示例文字示例文字</p>
</div>
<!-- CSS程式碼 -->
div{
  width:100px;  
　overflow:hidden;
} 

P{
　　　overflow:hidden;
     display: -webkit-box;
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 2;  /* 這是控制行數，此行程式碼必須搭配上面兩行程式碼才起作用 */
}

　　-webkit-line-clamp 是一個 不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中。

　　限制在一個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他外來的WebKit屬性。常見結合屬性：

• display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
• -webkit-box-orient   必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 

樣式1：文字超出範圍顯示方式

　　text-overflow：

　　值：1. clip 修剪文字

　　　　2. ellipsis 顯示省略符號來代表被修剪的文字

　　　　3. string 使用給定的字串來代表被修剪的文字。

樣式2：文字換行

1. <br/>  html程式碼強制換行
2. <p></p>  直接分段換行
   1. 　　這種方式的缺點是p標籤會有margin和padding
3. 給父級設定寬度，自動換行
   1. 　　這種方式對連續的數字和英文單詞不起作用了

4. css中的三種換行方式

   1. word-break:break-all
   2. word-wrap:break-word
      word- break:break-all   如果該行末端有個英文單詞很長它會把單詞截斷
      word-wrap:break-word 區別就是它會把末尾的長單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。
      

樣式3：文字不換行

1. white-space ：nowrap; 文字不會換行，直到遇到<br/>
2. text-overflow:   clip | ellipsis   
   1. clip  直接切除
   2. ellipsis 顯示省略號（…)