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

来源：互联网发布：淘宝账号信息查询编辑：程序博客网时间：2024/06/06 05:01

<!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属性也可以，并且值可以是任意，不信，你试试！

0 0