web中设置省略号的几种方式

web.jpeg

CSS设置省略号

• 我们应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

      <style>
        p{
            display: block;
           /*设置文本强制在一行显示*/
            white-space: nowrap;
           /* ellipsis 文本溢出 显示...省略号*/
            text-overflow: ellipsis;
          /* 隐藏*/
            overflow: hidden;
        /*如果元素固定的宽度 最好使用宽度 这样更明显*/

        }
    </style>

• 移动端的浏览器，大多数使用的是WebKit内核的浏览器,我们在移动端使用css代码控制省略号(...)时，一般加上-webkit-line-clamp属性，需要主要的是这个属性要配合 display: -webkit-box;和-webkit-box-orient: vertical 还有overflow: hidden;

//伸缩盒子模型显示
display: -webkit-box;
// 子元素的排列方式 。
-webkit-box-orient: vertical;
//设置行数
-webkit-line-clamp: 3;
//隐藏
overflow: hidden;

JS插件clamp.js

• 获取你要设置的元素,比如获取的元素名为ele
• 设置单行 省略

$clamp(ele,{clamp:1})

• 设置2行之后 省略

$clamp(ele,{clamp:2})

• 根据内容高度自动省略

$clamp(ele,{clamp:'auto'})

• 根据固定高度省略

$clamp(ele,{clamp:'35px'})