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;
}
相关推荐
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
风尚云网7 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
酷酷的威朗普10 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮10 小时前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
土豆湿11 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
鸽鸽程序猿13 小时前
【前端】CSS
前端·css
爱上语文1 天前
HTML和CSS 表单、表格练习
前端·css·html
小肚肚肚肚肚哦1 天前
盘点浏览器盒模型中各种 width、height 、边距和位置属性
css·html
NightCyberpunk1 天前
HTML、CSS
前端·css·html
南城FE1 天前
12个更现代化的CSS单行优化技巧
前端·css