多行文本省略/单行文本

最新推荐文章于 2024-12-31 20:58:29 发布

原创最新推荐文章于 2024-12-31 20:58:29 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了CSS中多行文本及单行文本的显示技巧，包括如何使用特定样式实现文本的自动折叠和省略号显示效果，对于前端开发者来说非常实用。

多行文本

.note_item text{
    display: -webkit-box;
    font-size:28rpx;
    color:#000000;
    line-height: 40rpx;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    overflow: hidden;
    text-overflow:ellipsis;
}

单行：

.note2_item text{
    display: block;
    font-size:28rpx;
    color:#000000;
    line-height: 40rpx;
    height: 120rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}