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;
}
相关推荐
泷羽Sec-静安8 小时前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
一只学java的小汉堡10 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
九皇叔叔17 小时前
HTML与CSS基础入门:从语法到页面结构全解析
css·html·1024程序员节
_殊途18 小时前
HTML-CSS项目练习
前端·css·html
β添砖java20 小时前
vivo响应式官网
前端·css·html·1024程序员节
jingling5551 天前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
Gee Explorer1 天前
第一篇使用HTML写一个随机点名网页
css·html5·1024程序员节
前端橙一陈1 天前
彻底理解 Bootstrap 的响应式断点机制:从 CSS 到 SCSS 的实现原理
css·bootstrap·scss
神膘护体小月半1 天前
css 的 clip-path 属性,绘制气泡
css
代码改变世界100861 天前
像素塔防游戏:像素守卫者
css·游戏·css3·1024程序员节