如果文字多了,想让超出元素外面的文字以省略号显示的css样式-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介: 请看下面的demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省略号显示</title> <style type="text/css"> .box{ width: 200px; hei

请看下面的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;
		}
结果就是这样的



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章