多行文本溢出显示省略号

      首先对之前的一篇文章进行一点补充。

      之前的那篇叫做“强制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>

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