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

最新推荐文章于 2025-06-19 10:02:17 发布

NNode

最新推荐文章于 2025-06-19 10:02:17 发布

阅读量6.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： css3 省略号布局弹性布局解决方法

本文链接：https://blog.youkuaiyun.com/Jesounao/article/details/54743448

Web前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了CSS3弹性布局中，当文字超出容器时省略号代替功能失效的问题及其解决方法。在某些情况下，由于flex布局的计算顺序，可能导致width和text-overflow属性无法正常工作。通过取消min-width或width属性的注释，可以恢复text-overflow: ellipsis;的效果。只需设置适当的width值，即可确保文字超出部分正确显示为省略号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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