如果文字多了，想让超出元素外面的文字以省略号显示的css样式

最新推荐文章于 2024-03-11 09:54:23 发布

weixin_33810006

最新推荐文章于 2024-03-11 09:54:23 发布

阅读量452

点赞数

原文链接：https://yq.aliyun.com/articles/91368

版权

请看下面的demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>省略号显示</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 20px;
			line-height: 20px;
			background: blue;
		}
	</style>
</head>
<body>
	<div class="box">一步一步走到天亮的博客，写的简单明了，易懂，当然我有点自恋。</div>
</body>
</html>

页面上的结果是这样的

文字超出了元素，并且自动换行

如果想让元素外面的文字以省略号显示，那么就加上如下代码

.box{
			width: 200px;
			height: 20px;
			line-height: 20px;
			background: blue;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

结果就是这样的

超出元素的文字部分，就会以三个省略号的形式显示了

那么文字不换行呢？

只加一个属性即可：white-space：nowrap；

.box{
			width: 200px;
			height: 20px;
			line-height: 20px;
			background: blue;
			white-space: nowrap;
		}

结果就是这样的

weixin_33810006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如果文字多了，想让超出元素外面的文字以省略号显示的css样式

请看下面的demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>省略号显示</title> <style type="text/css"> .box{ wi...
复制链接

扫一扫