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

CSS3弹性布局文字超出省略号代替不起作用解决方法

2017-01-26 10:31 435 查看 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<style>
.text-deal{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="text-deal">
这是一个有效果的文字超出用省略号代替的例子，你看可以吗？
</div>
</body>
</html>


上面这个例子是文字超出部分用省略号代替的CSS解决办法，切换到手机模式后你就可以看到效果了，这样写是没有问题的，但是还有一些情况我们现在用得也比较多，最新的(16年)CSS3弹性布局。现在我们就来个简单的但足以说明问题的例子。来吧，骚年。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<style>
.parent{
display: flex;
}
.children{
flex: 1;
/*min-width: 0;*/
}
.text-deal{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">
<div class="text-deal">
这是一个有效果的文字超出用省略号代替的例子，你看可以吗？
</div>
</div>
</div>
</body>
</html>


切换到手机模式运行上面这个例子，会看到超出去的文字竟然没有被变成省略号。这是什么问题呢，可能是flex计算的时候，先计算的子元素，导致忽略了width和text-overflow的计算，具体原因还不清楚，但我知道怎么才可以让text-overflow: ellipsis;起作用。你仔细看下上面的样式代码，里面有一行代码被注释掉了，你把他放出来，就可以解决了text-overflow:ellipsis文字超出省略号代替不起作用的问题了。不只是min-width属性可以，width属性也可以，并且值可以是任意，不信，你试试！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3 省略号 布局 弹性布局 解决方法
相关文章推荐
新的分享
章节导航