css行内文本超出显示省略号或显示固定超出部分省略

前端 5个月前 达西克
1,130 0 0
  • 文本不换行,将超出一行以外的内替换成…
    /*文本不换行,这样超出一行的部分被截取,显示...*/
    .line-limit-length {
    width: 200px;
    overflow:hidden;
    text-overflow:ellipsis;
    background: goldenrod;
    white-space: nowrap;/*加宽度width属来兼容部分浏览*/
    }
  • 文本超过指定行数就替换成…,这里以3行为例
    .show-text-line-3{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    }
  • 加入样式后效果如下
    css行内文本超出显示省略号或显示固定超出部分省略
阿里云爆款特惠服务器
版权声明:达西克 发表于 2022年 9月 17日 pm12:13。
转载请注明:css行内文本超出显示省略号或显示固定超出部分省略 | 达西克

相关文章

暂无评论

暂无评论...