今天在看前端頁面，發現一個實用技能（很多朋友早已經玩爛的技能  哈哈……），對某個指定寬度的標籤，當文字內容超出當前設定的寬度時，超出部分變成省略號，滑鼠懸浮，顯示全部內容。

display: block;
width: 170px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

text-overflow：clip | ellipsis

預設值：clip

適用於：所有元素

clip： 當物件內文字溢位時不顯示省略標記（...），而是將溢位的部分裁切掉。  ellipsis： 當物件內文字溢位時顯示省略標記（...）。

在使用ellipsis的時候，必須配合overflow:hidden; white-space:nowrap; width:50%;這三個樣式共同使用才會有效果

滑鼠懸浮展示全部，則是在標籤中增加 title 屬性，例如：  <span  title="我是title，我很長的"></span>

完整示例：

<style type="text/css">
    .test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}
</style>

<div class="test">我是全部示例，我可長********************可長****************可長************可長*******了</div>