CSS和JS实现⽂本溢出显⽰省略号本⽂记录实现⽂本溢出显⽰省略号的⼏种⽅式。
单⾏⽂本
三⾏CSS代码实现：
overflow: hidden; // ⽂本溢出隐藏
text-overflow: ellipsis; // 显⽰省略号
white-space: nowrap; // 设置⽂本不换⾏
注意：
设置⽂本溢出显⽰省略号时必须有宽度 width；
必须要设置display属性为line-block/block，设置为其他值不⽣效。
多⾏⽂本
1. CSS代码实现
这种⽅式⽤于webkit浏览器或者移动端页⾯中。
具体例⼦如下：
<div class="box">css和html和js怎么结合
<p class="textEllipsis">
这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字
</p>
</div>
<style>
box {
width: 200px;
background-color: #ccc;
}
.textEllipsis{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;  /*显⽰的⾏数*/
overflow: hidden;
word-break:break-all; /*可择*/
}
</style>
在未设置.textEllipsis样式之前⽂本如上图显⽰。
设置.textEllipsis样式之后，如下图显⽰。显⽰两⾏，可以通过设置-webkit-line-clamp的属性值来控制显⽰的⾏数。
word-break: break-all；所有的都换⾏，不留⼀点空隙的换⾏。如下图所⽰。
2. ⾮webkit浏览器
可以通过css样式技巧实现。实例如下：
<div class="box">
<p class="textEllipsis">
这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字
</p>
</div>
<style>
.box {
width: 200px;
background-color: #ccc;
}
.textEllipsis {
position: relative;
line-height: 20px;
height: 60px; /*height⾼度正好是line-height的n倍*/
overflow: hidden;
border: #5D5D5D solid 1px;
word-break: break-all;
}
.textEllipsis::after {
content: "…";
position: absolute;
bottom: 0;
right: 0;
width: 17px;
padding-left: 33px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
效果图如下，感觉不是很美观，但也是⼀种实现⽅式。
js实现⽂本溢出显⽰省略号
使⽤⼀些js库实现⽂本溢出隐藏的效果也⽐较好。
1. Clamp.js 实现。github地址：
var module = ElementById('clamp-this-module');
//多⾏
$clamp(module,{clamp:3});
//单⾏
$clamp(module,{clamp:1});
2. 使⽤jquery插件，jQuery.dotdotdot。官⽹地址
注意：使⽤jQuery.dotdotdot插件时要给希望显⽰省略号的盒⼦添加⾼度，否则不会⽣效。
<style>
.
wrapper {
width: 400px;
height: 50px;
}
</style>
<p class="wrapper">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores maxime quia velit quod, praesentium animi a, debitis incidunt, consectetur odio, voluptatum nam dolores perspiciatis quo sit. Voluptatibus ab temporibus, sit! </p>
<script src="cdn.jsdelivr/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="cdn.jsdelivr/npm/jquery.dotdotdot@3.2.3/dist/jquery.dotdotdot.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".wrapper").dotdotdot({
// 添加相关配置项
ellipsis : '...'
});
});
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。