css文字截断总结css单行截断对于文字的单行截断，一般溢出容器的文字使用省略号显示是比较常见的需求：效果如下： c

css单行截断

对于文字的单行截断，一般溢出容器的文字使用省略号显示是比较常见的需求：

<style>
.box {
    width: 200px;
    background-color: lightblue;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<style>
<body>
    <div>我是单行截断我是单行截断我是单行截断我是单行截断我是单行截断我是单行截断我是单行截断我是单行截断我是单行截断我是单行截断我是单行截断我是单行截断</div>
</body>

效果如下：

css多行截断

多行截断是之前写小程序的时候遇到的需求，那时遇到这个需求了才去查了一下有-webkit-line-clamp这么个属性：把块容器中的内容限制为指定行数。 MDN传送门：developer.mozilla.org/zh-CN/docs/…

<style>
.box {
    width: 200px;
    background-color: lightblue;
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
<style>
<body>
    <div>我是多行截断要截断为3行我是多行截断要截断为3行我是多行截断要截断为3行我是多行截断要截断为3行我是多行截断要截断为3行我是多行截断要截断为3行我是多行截断要截断为3行</div>
</body>

效果如下：

其中，display: -webkit-box; 和 -webkit-box-orient 这两个属性必须要和-webkit-line-clamp 结合使用。

display:-webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。