text-overflow:ellipsis 文字超出省略号代替不起作用解决方法

场景重现

无效场景一

现在我们来一个正常的例子

<!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>

切换到手机模式后你就可以看到效果了，这样写是没有问题的，但是还有一些情况我们现在用得也比较多，弹性布局。现在我们就来个简单的但足以说明问题的例子。来吧，骚年。

<!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>

切换到手机模式运行上面这个例子，你会看到超出去的文字竟然没有被变成省略号。如下图：

这是什么问题呢，这个问题我也不太清楚，但我知道怎么才可以让text-overflow: ellipsis;起作用。你仔细看下上面的样式代码，里面有一行代码被注释掉了，你把他放出来，就可以解决了text-overflow:ellipsis文字超出省略号代替不起作用的问题了。不只是min-width属性可以，width属性也可以，并且值可以是任意，不信，你试试！

无效场景二

这里还有一种情况也需要我们注意的，如果你用了-webkit-line-clamp: 1; 这个属性来控制多少行再省略，那么就你得像下面这样写：

看这里

.text-deal{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

在一般情况下也是没问题的，就像平时的那么在一定的场景中就会出现问题省略号无效的情况。代码如下：

天算不如天算

<h3>一般情况下没问题</h3>
<div class="parent">
<div class="children">
<div class="text-deal"> A an a boy,and you.A an a boy,and you.A an a boy,and you.A an a boy,and you. </div>
<div class="text-deal">省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用</div>
</div>
</div>
<h3>比较极端的情况就会有问题</h3>
<div class="parent">
<div class="children">
<div class="text-deal">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
<div class="text-deal"> aasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsd</div>
</div>
</div>

测试的世界里充满极端，效果如下图所示：

所以上面那么极端的情况就会横空出世，但在证据你也只能把测试送过来的反人类场景进行处理。样式改进如下：

被极端逼出来的极致

.text-deal{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all; /* 追加这一行代码 */
}

只需要添加一行代码（word-break：break-all）就可以了。

最终效果如下：

从上面的两个应用场景中我们不妨总结下（完美方案）：

完美到没朋友

.text-deal{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all; /* 追加这一行代码 */
}

上面这种方法可以实现 n 行后加省略号，比如 1 行、2行、3行……，所以上面这个是通用方法，当然也也可以使用场景一中的解决方法，只不过那种方案只适合一行省略。