zoukankan      html  css  js  c++  java
  • flex布局导致文字溢出隐藏没有效果

    解决: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{
             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>
  • 相关阅读:
    javascript修改浏览器title方法 JS动态修改浏览器标题
    input type="checkbox" 选中传值,不选中传值的方法讲解
    关闭控制台的自动切换按钮
    mac切图
    charles
    apache
    超级经典的HTTP协议讲解
    一个很有趣的算法
    移动端网络判断
    移动端1px细线的处理
  • 原文地址:https://www.cnblogs.com/wjlbk/p/12884659.html
Copyright © 2011-2022 走看看