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 小时前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
islandzzzz2 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
晴殇i4 小时前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
Hilaku4 小时前
2025年,每个前端都应该了解的CSS选择器:`:has()`, `:is()`, `:where()`
前端·css
sunbyte4 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
旷世奇才李先生5 小时前
CSS 安装使用教程
前端·css
遗憾随她而去.5 小时前
深入理解CSS中的BFC 与IFC , 布局的两大基础概念
前端·css
sunbyte7 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
LeQi8 小时前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
LuckySusu9 小时前
【CSS篇】对position: sticky定位的深入理解
前端·css