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;
}
相关推荐
石金龙14 小时前
[译] Composition in CSS
前端·css
天天扭码14 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户4582031531715 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
会豪1 天前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy2 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy2 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
墨渊君2 天前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
小帆聊前端2 天前
Flex 布局实战指南:从踩坑到精通,解决 90% 布局难题
css
谢尔登2 天前
【CSS】层叠上下文和z-index
前端·css
Alice-YUE2 天前
【CSS学习笔记3】css特性
前端·css·笔记·html