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;
}
相关推荐
吃饺子不吃馅7 分钟前
大家都在找的手绘/素描风格图编辑器它它它来了
前端·javascript·css
Zhencode12 分钟前
CSS变量的应用
前端·css
Joker Zxc11 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
面向星辰12 小时前
css其他选择器(精细修饰)
前端·css
宁雨桥12 小时前
从视口到容器:CSS 容器查询完全指南
前端·css
我登哥MVP16 小时前
HTML-CSS-JS-入门学习笔记
javascript·css·笔记·学习·html
西洼工作室2 天前
CSS高效开发三大方向
前端·css
昔人'2 天前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
不叫猫先生2 天前
中秋连连看小游戏开发完整教程
javascript·css·小游戏·连连看
西洼工作室3 天前
SSE与轮询技术实时对比演示
前端·javascript·css