CSS多行省略的方法有哪些

简介: CSS多行省略的方法有哪些

显示一行文字 省略:

.title {
  width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

显示两行文字 省略:

.title {
  width: 100px;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
}

使用:after 伪元素设置一个背景渐变色,不显示省略号

.title:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: 10px;
  width: 20%;
  height: 20px;
  background: linear-grandient(to right, ....):
}


相关文章
|
1月前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
1月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
2月前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
32 1
|
3月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
17 2
|
3月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
21 3
|
2月前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
24 0
|
3月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
|
2月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
2月前
|
Web App开发 前端开发 iOS开发
|
3月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
16 1