CSS溢出文字使用省略号表示

最新推荐文章于 2024-04-13 16:49:16 发布

靡_初

最新推荐文章于 2024-04-13 16:49:16 发布

阅读量3.8k

点赞数 2

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/kettlo/article/details/115380544

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

溢出文字省略号显示

1.单行文本溢出显示省略号：

需要给元素设置固定宽度，如果是行内元素需要先转换为行内块元素或块元素 display: inline-block;

在这里插入图片描述

<body>
    <p>
        由衷敬意，难以言表。此处省略一万字。
    </p>
</body>

p {
    display: inline-block;
    width: 200px;

    /* 1.先强制一行内显示文本 */
    white-space: nowrap;
    /* 2.超出部分隐藏 */
    overflow: hidden;
    /* 3.文字用省略号替代超出的部分 */
    text-overflow: ellipsis;
}

2.多行文本溢出显示省略号：

有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核的）

需要严格设定好高度。

推荐让后台人员做（限制字数，拼接省略号）

在这里插入图片描述

div {
    width: 100px;
    height: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 限制在一个块元素显示的文本行数 */
    -webkit-line-clamp: 2;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
}

<body>
    <div>
        由衷敬意，难以言表。此处省略一万字。由衷敬意，难以言表。此处省略一万字。
    </div>
</body>

靡_初

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS溢出文字使用省略号表示

溢出文字省略号显示1.单行文本溢出显示省略号：需要给元素设置固定宽度，如果是行内元素需要先转换为行内块元素或块元素 display: inline-block;<body> <p> 由衷敬意，难以言表。此处省略一万字。 </p></body>p { display: inline-block; width: 200px; /* 1.先强制一行内显示文本 */ white-space
复制链接

扫一扫

专栏目录