关于页面单行、多行文本超出显示省略号的解决方案

最新推荐文章于 2023-10-13 10:14:37 发布

原创最新推荐文章于 2023-10-13 10:14:37 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

html/css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用HTML和CSS来优雅地处理文本溢出，通过设置宽度、高度、文本溢出样式等属性，实现单行或多行文本在溢出容器时显示省略号的效果。适用于WebKit浏览器及移动端。

HTML页面

单行：

<p class="pl">单行内容标题单行内容标题...</p>

多行：

<p class="pro_text">多行内容多行内容多行内容
多行内容多行内容多行内容
多行内容多行内容多行容...</p>

添加CSS样式

/*单行文本的溢出显示省略号*/
    .pl{
        width: 200px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space: nowrap;  //不换行
    }

/*多行行文本的溢出显示省略号*/

.pro_text{
    width:1085px;
    height:135px;
    position: relative;
    top:125px;
    left: 50px;
    color: #444444;
    line-height:28px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box; 
    /* autoprefixer: off */ 
    -webkit-box-orient:vertical; 
    /* autoprefixer: on */ 
    -webkit-line-clamp:5;
}

注意:

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；本人使用谷歌浏览器测试可用.