【HTML/CSS】文本溢出部分显示省略号

吴小兽_

已于 2025-02-06 17:23:23 修改

阅读量285

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML+CSS 文章标签：前端 html css

于 2024-12-20 16:41:26 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42426880/article/details/144614457

HTML+CSS 专栏收录该内容

9 篇文章

订阅专栏

单行文本溢出

<div class="box">文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</div>

.box {
    width: 500px;
    background: pink;
    /* 强制文本在一行内显示 */
    white-space: nowrap;
    /* 超出的部分隐藏 */
    overflow: hidden;
    /* 超出部分文本用省略号代替 */
    text-overflow: ellipsis;
}

多行文本溢出

<div class="box">文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</div>

.box {
    width: 500px;
    background: pink;
    /* 超出的部分隐藏 */
    overflow: hidden;
    /* 超出部分文本用省略号代替 */
    text-overflow: ellipsis;
    /* 将盒子模型转换为弹性伸缩盒子模型 */
    display: -webkit-box;
    /* 限制显示的文本行数 */
    -webkit-line-clamp: 3;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
}