CSS 限制文字行数(超出显示省略号...)

简介: CSS 限制文字行数(超出显示省略号...)

/* 单行隐藏  */
.xxx {
  /* 文本不换行 */
  white-space: nowrap;
  /* 超出范围隐藏 */
  overflow: hidden;
  /* 文字超出用省略号 */
  text-overflow: ellipsis;
}
/* 多行隐藏  */
.xxx {
  /* 在恰当的断字点进行换行 */
  word-break: break-all;
  /* 超出范围隐藏 */
  overflow: hidden;
  /* 文字超出用省略号 */
  text-overflow: ellipsis;
  /* 盒子模型 */
  display: -webkit-box;
  /* 显示的文本行数 */
  -webkit-line-clamp: 3;
  /* 子元素的垂直排列方式 */
  -webkit-box-orient: vertical;
}

相关文章
|
24天前
|
前端开发
CSS多行省略的方法有哪些
CSS多行省略的方法有哪些
|
24天前
|
弹性计算 前端开发
CSS 文字超出变为省略号
CSS 文字超出变为省略号
9 0
|
2月前
|
前端开发
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
|
2月前
超简单的html+css魔幻霓虹灯文字特效
超简单的html+css魔幻霓虹灯文字特效
13 3
超简单的html+css魔幻霓虹灯文字特效
|
2月前
|
Web App开发 弹性计算 前端开发
纯 CSS 实现多行文字截断
纯 CSS 实现多行文字截断
21 1
|
3月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
|
4月前
|
前端开发
html+css+js实现自动敲文字效果
html+css+js实现自动敲文字效果
25 0
|
前端开发 弹性计算
css文本超出2行就隐藏并且显示省略号
首先,要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性,需要记得。
4047 0
|
1天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
1天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。