[分享]css3截取字符串

在前端开发中，我们经常会遇到需要限制字符串长度的情况，比如在列表页展示文章标题时，我们希望标题不要太长而影响页面布局。这时候，我们可以使用CSS3的textoverflow属性来截取字符串。 .ti...

在前端开发中，我们经常会遇到需要限制字符串长度的情况，比如在列表页展示文章标题时，我们希望标题不要太长而影响页面布局。

这时候，我们可以使用CSS3的text-overflow属性来截取字符串。

  .title {
            white-space: nowrap; /*禁止文字自动换行*/
            overflow: hidden; /*隐藏溢出部分*/
            text-overflow: ellipsis; /*在文本溢出的位置显示省略号*/
            width: 200px; /*限制宽度*/
        } 

在上面的代码中，我们给标题元素设置了固定宽度，同时使用了white-space属性禁止自动换行，overflow属性隐藏溢出部分，text-overflow属性在文本溢出时显示省略号。

另外，text-overflow属性还有一个重要的取值：clip。与ellipsis不同的是，clip不会在溢出位置显示省略号，而是直接截断字符串。

  .title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip; /*直接截断字符串*/
            width: 200px;
        } 

除了在单行文本截取时使用，text-overflow属性还可以在多行文本截取时使用。

  .content {
            display: -webkit-box; /*将容器作为伸缩容器，下面的属性才会起作用*/
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3; /*限制显示3行*/
            -webkit-box-orient: vertical; /*设置垂直方向上展示*/
        } 

上述代码实现了对多行文本的截取，并在超过3行时显示省略号。

总的来说，CSS3的text-overflow属性方便了我们在前端开发中对字符串长度的限制，同时也为页面布局提供了更加灵活的排版方案。