您的位置：首页 > Web前端 > CSS

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

2016-10-01 01:39 281 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 超出元素的文字以省略号显示文字不换行显示

相关文章推荐

新的分享

章节导航