CSS溢出的文字省略号显示

最新推荐文章于 2024-06-05 17:42:57 发布

安澜仙王

最新推荐文章于 2024-06-05 17:42:57 发布

阅读量728

点赞数

分类专栏： # CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/sinat_28317385/article/details/120006390

版权

CSS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

1.单行文本溢出显示省略号–必须满足三个条件

/* 1.先强制一行内显示文本 */
     white-space: nowrap;（默认normal自动换行）
/* 2.超出的部分隐藏 */
     overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
     text-overflow: ellipsis;

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 150px;
				height: 80px;
				background-color: #00B057;
				white-space: normal;
				/* overflow: hidden; */
				/* text-overflow: ellipsis; */
			}
		</style>
	</head>
	<body>
		<div>
			啥也不说，此处省略一万字
		</div>
	</body>
</html>

在这里插入图片描述
加了省略号之后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 150px;
				height: 80px;
				background-color: #00B057;
				/* 1.先强制一行内显示文本 */
				white-space: nowrap;
				/* 2.超出的部分隐藏 */
				overflow: hidden;
				/* 3.文字用省略号替代超出的部分 */
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div>
			啥也不说，此处省略一万字
		</div>
	</body>
</html>

在这里插入图片描述

2.多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适合于webkit浏览器或移动端(移动端大部分是webkit内核)，还有个方法用js实现

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 150px;
				height: 80px;
				background-color: #00B057;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 弹性伸缩盒子模型显示 */
				display: -webkit-box;
				/* 限制在一个块元素显示的文本的行数 */
				-webkit-line-clamp: 2;
				/* 设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-box-orient: vertical;
			}
		</style>
	</head>
	<body>
		<div>
			啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字
		</div>
	</body>
</html>

在这里插入图片描述
这里有个问题，显示了第三行的文字，有个解决方法，把高缩小点就行了,正确代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 150px;
				height: 45px;
				background-color: #00B057;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 弹性伸缩盒子模型显示 */
				display: -webkit-box;
				/* 限制在一个块元素显示的文本的行数 */
				-webkit-line-clamp: 2;
				/* 设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-box-orient: vertical;
			}
		</style>
	</head>
	<body>
		<div>
			啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字
		</div>
	</body>
</html>

在这里插入图片描述

安澜仙王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS溢出的文字省略号显示

目录1.单行文本溢出显示省略号--必须满足三个条件2.多行文本溢出显示省略号1.单行文本溢出显示省略号–必须满足三个条件/* 1.先强制一行内显示文本 */ white-space: nowrap;（默认normal自动换行）/* 2.超出的部分隐藏 */ overflow: hidden;/* 3.文字用省略号替代超出的部分 */ text-overflow: ellipsis;代码：<!DOCTYPE html><html> &lt
复制链接

扫一扫