多行文本溢出显示省略号

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

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

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

原文地址:https://www.cnblogs.com/LXJ-CHEER/p/4992606.html