前端 CSS 经典:省略号

简介: 前端 CSS 经典:省略号

1. 单行省略

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

2. 双行省略(webkit 内核)

.ellipsis {
  display: -webkit-box; /* 显示多行文本容器 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*显示行数*/
  overflow: hidden; /*隐藏多出部分文字*/
  text-overflow: ellipsis; /*用省略号代替多出部分文字*/
}

3. 通用省略

.ellipsis {
  position: relative;
  line-height: 1.4em;
  height: 2.8em; /* 这里的高度是line-height的两倍 */
  overflow: hidden;
}
.ellipsis::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 5px 1px 30px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 50%) repeat
    scroll 0 0 rgba(0, 0, 0, 0);
}


目录
相关文章
|
1天前
|
前端开发 容器
用CSS将文字超出部分变为省略号的方法
用CSS将文字超出部分变为省略号的方法
|
5天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
5天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
19 2
|
14天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
25天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
17 0
|
30天前
|
前端开发
前端 CSS 经典:SVG 描边动画
前端 CSS 经典:SVG 描边动画
30 0
|
30天前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
20 0
|
30天前
|
前端开发
前端 CSS 经典:模特换装效果
前端 CSS 经典:模特换装效果
43 0
|
30天前
|
前端开发 算法
前端 CSS 经典:filter 滤镜
前端 CSS 经典:filter 滤镜
29 0
|
30天前
|
前端开发
前端 CSS 经典:弧形边框选项卡
前端 CSS 经典:弧形边框选项卡
28 0

热门文章

最新文章