flex布局导致文字溢出隐藏没有效果

最新推荐文章于 2025-07-26 11:30:00 发布

原创最新推荐文章于 2025-07-26 11:30:00 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了解决Flex布局和ellipsis溢出隐藏省略号提示冲突的方法，通过将两者分别放置于不同容器内，实现文字的正确显示和省略。

解决：flex弹性布局和溢出隐藏使用ellipsis省略号提示的冲突

解决：flex弹性布局和溢出隐藏使用ellipsis省略号提示的冲突
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
/*下面文字使用了弹性布局绝对居中，所以中间的文字显示，两边的问题隐藏*/
    .flex-center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    h2{
        width: 100px;
        height: 50px;
        font-size: 30px;
        line-height: 50px;
        background: #fef;
        color: #f00;
        margin: auto;
        overflow: hidden;
    }
    .ellipsis{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<body>
    <!-- 解决flex布局和溢出隐藏省略号提示的问题：没有什么是一个嵌套解决不了的问题： -->
    <!-- 问题解析：把flex布局和ellipsis溢出隐藏省略号代替放在一个容器内就会发生冲突。 -->
    <!-- 解决办法：把flex布局和ellipsis溢出隐藏省略号分别放在两个容器内，立马解决问题。 -->
    <h2 class="flex-center ellipsis">我啊你就像老鼠的凤山街道</h2>
    <h2 class="flex-center "><span class="ellipsis">我啊你就像老鼠的凤山街道</span></h2>
</body>
</html>