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>
  • 相关阅读:
    part17 一些知识总结
    part16 php面向对象
    part15 php函数
    part14 php foreach循环
    part13 数组排序
    part12 php数组
    part11 php条件语句
    part10 php运算符
    part09 php字符串变量
    part08 php常量
  • 原文地址:https://www.cnblogs.com/wjlbk/p/12884659.html
Copyright © 2011-2022 走看看