CSS 文本超出省略

单行省略

css 复制代码
width: 200px; /* 容器宽度 */
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 超出部分省略 */

多行省略

css 复制代码
display: -webkit-box;
-webkit-line-clamp: 2; /* 限制行数 */
-webkit-box-orient: vertical; /* 文本垂直排列 */
overflow: hidden;
text-overflow: ellipsis;

需要注意的是,这种多行省略的效果只在使用 WebKit 内核的浏览器中起作用,如 Chrome 和 Safari。

对于其他浏览器,可能需要使用其他技术或 JavaScript 库来实现类似的效果。

判断内容是否省略

js 复制代码
function checkOverflow(el) {
	const curOverflow = el.style.overflow;

	if (!curOverflow || curOverflow === "visible") {
		el.style.overflow = "hidden";
	}

	const isOverflowing =
		el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;

	el.style.overflow = curOverflow;

	return isOverflowing;
}
相关推荐
华仔啊1 小时前
关于移动端100vh的坑和终极解决方案,看这一篇就够了!
前端·css
拜无忧21 小时前
完美圆角,渐变边框,兼容chrome 60,两层背景的视觉差
前端·css
jingling5551 天前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法
luckyzlb1 天前
02- html && css
前端·css·html
你的电影很有趣1 天前
lesson55:CSS导航组件全攻略:从基础导航条到动态三级菜单与伸缩菜单实现
前端·css
蔗理苦1 天前
2025-09-05 CSS4——浮动与定位
开发语言·前端·css·html·css3
slim~2 天前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
F2E_Zhangmo2 天前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
蔗理苦2 天前
2025-09-05 CSS3——盒子模型
前端·css·css3
qq_510351592 天前
vw 和 clamp()
前端·css·html