用js方法可以实现截取一段文字,让他只显示几十个文字,然后后面是跟着…
那么是否可以用纯css来实现这个效果呢?
可以的,厦门网站建设在这里给你演示一下:
您是否知道可以使用纯CSS截断文本?
html代码
<div class="wrapper">
<div class="overflow-ellipsis">This text is truncated, because there is not enough space to display it completely.</div>
</div>
CSS代码
.wrapper {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background: #4776e6;
background: -webkit-linear-gradient(to right, #4776e6, #8e54e9);
background: linear-gradient(to right, #4776e6, #8e54e9);
}
.overflow-ellipsis {
width: 200px;
background-color: #fff;
padding: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}