溢出文字用省略号表示

最新推荐文章于 2024-04-21 22:40:04 发布

喵_美

最新推荐文章于 2024-04-21 22:40:04 发布

阅读量249

点赞数

分类专栏：案例 html

本文链接：https://blog.csdn.net/qq_34708564/article/details/90246328

版权

案例同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

html

21 篇文章 0 订阅

订阅专栏

单行文本的溢出显示省略号

方法：

    	/*1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行*/
		white-space: nowrap;
		 /* 2. 超出的部分 隐藏*/
		overflow: hidden; 
		 /* 3. 溢出的部分用省略号替代*/
		text-overflow: ellipsis; 
		 /* 以上3个步骤一个都不能少*/

图示：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	body {
		padding: 30px;
	}
	li {
		list-style: none;
		width: 200px;
		height: 30px;
		border: 1px solid pink;
		/*1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行*/
		white-space: nowrap;
		 /* 2. 超出的部分 隐藏*/
		overflow: hidden; 
		 /* 3. 溢出的部分用省略号替代*/
		text-overflow: ellipsis; 
		 /* 以上3个步骤一个都不能少*/
		line-height: 30px;
	}
	</style>
</head>
<body>
	<ul>
		<li>文字内容文字内容文字内容文字内容文字内容</li>
	<li>文字内容文字内容文字内容文字内容文字内容</li>
	<li>文字内容文字内容文字内容文字内容文字内容</li>
	<li>文字内容文字内容文字内容文字内容文字内容</li>
	<li>文字内容文字内容文字内容文字内容文字内容</li>
	</ul>
</body>
</html>

多行文本溢出显示省略号

方法：

display: -webkit-box;
-webkit-box-orient: vertical;
 /* 3.设置满几行后开始溢出*/
-webkit-line-clamp: 3;
overflow: hidden;

图示：
在这里插入图片描述
代码：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	body {
		padding: 30px;
	}
	div {
		width: 200px;
		border: 1px solid pink;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
     overflow: hidden;
	}
	</style>
</head>
<body>

		<div>文字内容文字内容文字内容文字内容文字内文字内容文字内容文字内容文字内容文字内
      容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内
      容文字内容s 容</div>


</body>
</html>

喵_美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
溢出文字用省略号表示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { padding: 30px;...
复制链接

扫一扫

专栏目录