单行 / 多行文本溢出隐藏

最新推荐文章于 2024-12-31 20:58:29 发布

原创最新推荐文章于 2024-12-31 20:58:29 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

css文本专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用CSS样式来处理单行或多行文本溢出的情况，包括隐藏超出部分并用省略号表示的方法，以及一种特殊的弹性盒模型布局方式。这些技巧适用于网页设计中对文本长度控制的需求。

单行文本超出隐藏：

在这里插入代码片
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;

多行文本超出隐藏：

在这里插入代码片
	overflow:hidden;/*超出隐藏*/
	text-overflow:ellipsis;/*文本溢出时显示省略标记*/
	display:-webkit-box;/*设置弹性盒模型*/
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;/*子代元素垂直显示*/

改方法只能在本地使用，可以尝试在后面加上下面俩行代码试试
	/*! autoprefixer: off */
	 /*autoprefixer: on */

其他多行溢出隐藏方法：思路
///////可以考虑用… + 定位来实现