CSS -- 控制多出文本顯示省略號

由於網頁排版需要，有些地方過長的文本需要加省略號。比如，限制標籤寬度爲100px，超出寬度的部分就用神略號顯示，如上圖

html標籤：
< label title =”控制多出文本顯示省略號”>控制多出文本顯示省略號

CSS 樣式：

label { 
          font-size: 14px ;
          display : block;
          width : 120px;
          white-space: nowrap ;
          overflow : hidden;
          text-overflow : ellipsis;
}

說明：

1. 標籤寬度一定要設置，可以根據實際情況調整

2. display:block; –對於一些個別標籤，如a、td、label等是不能使用overflow:hidden的，需要設置此屬性

3. white-space:nowrap;–強制文本在一行顯示。

4. overflow:hidden;–超出的文本隱藏

5. text-overflow:ellipsis;–超出的文本用省略號代替

text-overflow屬性值：
clip：截取文本
ellipsis：截取文本多餘用省略號代替
ellipsis-word：省略號後顯示最後一個字符

–IE、Webkit內核瀏覽器（chrome，safari，360和搜狗的高速模式）：text-overflow
–Opera: -o-text-overflow
–Firefox: 不支持

另外，爲了可以看到已經 隱藏的文本，可以再標籤中加入title屬性，屬性值爲該文本。加該屬性後，
當鼠標指針移到該標籤上方時會顯示文本全部內容