在一個限定了高寬的容器中放入文字，當文字超出時就會出現杯具，簡單的控制使用 CSS 即可；
觀察了一下，使用四大金剛即可使此文字超出時自動截去末尾，並加上省略符號：
| 代碼如下 |
複製代碼 |
|
.words{
width:200px; //限定寬度
white-space:nowrap; //強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象
word-break:keep-all; //對於中文，韓文，日文，不允許字斷開
text-overflow:ellipsis; //當對象內文本溢出時顯示省略標記(...)
overflow:hidden; //超出容器不顯示
} |
例
| 代碼如下 |
複製代碼 |
|
<div id="box" class="box">測試文字長度測試文字長度測試文字長度測試文字長度測試文字長度</div>
<br />
<button>white-space-nowrap</button>
<button>word-break-keep-all</button>
<button>overflow-hidden</button>
<button>text-overflow-ellipsis</button>
<h3>啟用的 Classes:</h3>
<p id="info"></p> |
css
| 代碼如下 |
複製代碼 |
|
.box{line-height:22px; height:22px; width:200px; overflow:auto; border:1px solid #ccc; margin:10px;}
.white-space-nowrap{white-space:nowrap;}
.word-break-keep-all{word-break:keep-all;}
.overflow-hidden{overflow:hidden;}
.text-overflow-ellipsis{text-overflow:ellipsis;} |
