css 智能省略（剪切）多餘部分的字體

主要屬性：

text-overflow: ellipsis; // 顯示省略符號來表明被修剪的文本。

white-space: nowrap;     // 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。

overflow: hidden;        // 將超出部分隱藏

 

ps：模擬塊級元素

• 須要塊級元素，或者 
• 限制文字顯示的寬度：width。

 

例子：

<style type="text/css">

    .ellipsis{ 

        text-overflow: ellipsis;

        white-space: nowrap;

        overflow: hidden;

        display: inline-block;

        vertical-align: middle;

        width: inherit; 

    }

</style>

<div style="width: 150px;border: 1px solid red;margin-top: 100px;margin-bottom: 100px;">

    <span class="">生活就像海洋，只有意志堅強的人才能到達彼岸</span>

</div>

使用ellipsis類前：

使用ellipsis後：