多行文本溢出顯示省略號

      首先對以前的一篇文章進行一點補充。

      以前的那篇叫作「強制span不換行」。當時只是實現了功能，並不知其因此然。最近學習了一點頁面製做的知識，對原理有了些許瞭解。對於單行文本，實現溢出不換行並以省略號表示能夠徹底經過css實現，代碼以下：

/*處理文本的空白字符，使其不自動換行*/
white-space: nowrap; 

/*溢出的部分 隱藏*/
overflow:hidden;

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

      其實只要上面的代碼合做，就能夠達到單行文本不換行，溢出以省略號表示的需求。因此說，仍是要了解原理，才能真正作到以不變應萬變，才能百變不離其宗。

 

      下面來總結一下多行文本溢出不換行的寫法。

1. js實現。如今有一些比較成熟的js框架，我在項目裏使用了clamp.js。  連接以下：https://github.com/josephschmitt/Clamp.js 

2. css實現。代碼：

<style>
     .text{
            height: 4.5rem;
            line-height: 1.5rem;
            overflow: hidden;
            position: relative;
}
    .text:after{
            position: absolute;
            right: 0rem;
            bottom: 0rem;
            content: "...";
            display: block;
}
</style>   
<div class="text">
    安徽醫科大學第一附屬醫院是安徽省規模最大的綜合性教學醫院，集醫療、教學、科研、預防、康復、急救爲一體。前身爲上海東南醫學院附屬東南醫院，創辦於1926年。1949年內遷至安徽懷遠縣，1952年遷至合肥市。1993年成爲衛生部首批三級甲等醫院。2011年進入中國最佳醫院80強排行榜。 醫院開放牀位2582張，設臨牀科室41個，醫技科室19個，臨牀教研室26個。
</div>

　　注意：高度必須是行高的三倍。