CSS对文本处理

晨潇冥

于 2018-10-11 09:15:28 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36971710/article/details/83006665

本文介绍了使用CSS解决文本溢出问题的三种方法：利用省略号显示超出文本，限制文本为两行显示，以及结合省略号和行数限制优雅处理长文本。这些技巧对于前端开发中优化用户体验至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.使用ellipsis实现省略号表示超出文本

div{

    overflow: hidden;
    text-overflow: ellipsis;
     white-space: nowrap;/*强制不换行*/
}

二.让文本显示两行

div{

    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-word;
    -webkit-box-orient: vertical;

}

三.让文本两行显示并用省略号表示超出部分
div{

    border: 1px solid red;
    height: 60px;;
    width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-word;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
}