多余字符用省略号...显示

什么小蛋挞**

已于 2022-11-09 07:57:09 修改

阅读量371

点赞数

CC 4.0 BY-SA版权

文章标签： css html5 html

于 2021-10-20 09:52:04 首次发布

本文链接：https://blog.csdn.net/queen_css/article/details/120859883

本文介绍了如何利用CSS的`overflow`, `text-overflow`和`white-space`属性来实现单行和多行文本的省略号显示，确保内容在有限的空间内优雅地展示关键信息。

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

单行文本多余文字用省略号显示

.title {
        width: 300px;
        height: 40px;
        line-height: 40px;
        /**将多余字符用省略号显示 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

多行文本多余文字用省略号显示

.list {
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient:vertical ;
        -webkit-line-clamp: 2;  //显示行数
        overflow: hidden;
     }