flex布局下，将内容限定在容器内（如内容超出以省略号显示）的实现方案

最新推荐文章于 2024-05-03 11:08:18 发布

weixin_30776545

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量362

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chaoyueqi/p/9619288.html

版权

当文字超出容器宽度时，以省略号显示，这一需求在项目中十分常见，但是在flex布局下，可能会遇到问题，如省略号不显示，内容超出容器等问题，本文通过demo测试案例，记录下问题及解决方案。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wrapper {
                width: 200px;
                display: flex;
            }
            .div1, .div2 {
                flex: 1;/*占比，最小宽度*/
                border: 1px solid blue; 
            }
            p {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="div1">
                <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            </div>
            <div class="div2">
                <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            </div>
        </div>
    </body>
</html>

如上代码所示，我们发现，文字内容并没有被限制在flex容器里面，以省略号显示，经过调试发现，flex水平布局的容器，flex的值表示的是宽度占比，同时，类似于设置了一个最小宽度min-width。（此时，当给容器的宽设置了一个小于占比 * 总宽的width值，是起不到作用的，但是设置了一个大于占比 * 总宽的width值时，宽度有效，并撑开外部容器。如果不设置宽度值，则当内容大于占比时，容器仍由内容撑开）。

有了以上实践理解之后，得到解决方案如下两种：

为内容的父级容器（本例中是.div1, .div2）设置overflow: hidden;
为内容的父级容器（本例中是.div1, .div2）设置一个小于占比的宽度，如width: 0;

转载于:https://www.cnblogs.com/chaoyueqi/p/9619288.html

weixin_30776545

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局下，将内容限定在容器内（如内容超出以省略号显示）的实现方案

当文字超出容器宽度时，以省略号显示，这一需求在项目中十分常见，但是在flex布局下，可能会遇到问题，如省略号不显示，内容超出容器等问题，本文通过demo测试案例，记录下问题及解决方案。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&...
复制链接

扫一扫