zoukankan      html  css  js  c++  java
  • flex布局中text-overflow失效的解决方案

    在开发中我们经常会遇到这种布局,要求文字垂直居中,且超出使用省略号
    3fb17a7a25bc88033926ae80fe85eae3.png
    说到垂直居中,兼容性最好的就是flex布局,但在flex布局下出现了text-overflow失效的情况

    实例代码

    <div class="wrapper">
       <div class="flex item">hahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div>
    </div>
    .flex{
        display: flex;
        align-items: center;
    }
    .item{
        height: 40px;
        background-color: bisque;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    出现了如下效果,我们可以看出over-flow属性是生效的,而text-overflow却失效了
    b5bf47a78b8f7a50e6a92f05a882b02d.png

    解决方案

    方案一

    在文本外面再多包装一层div元素

    <div class="wrapper">
            <div class="flex item">
                <div class="item-con">hahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div>
            </div>
    </div>
    .flex{
        display: flex;
        align-items: center;
    }
    .item{
        height: 40px;
        background-color: bisque;
    }
    .item-con{
        overflow: hidden;
        text-overflow: ellipsis;
    }

    3fb17a7a25bc88033926ae80fe85eae3.png

  • 相关阅读:
    phpajax高级篇
    一天学会ajax (php环境)
    php生成静态文件的方法
    MongoDB查询文档
    MongoDB删除文档
    MongoDB索引管理
    MongoDB插入文档
    MongoDB排序记录
    MongoDB 更新文档
    mongoDB 固定集合(capped collection)
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/14926062.html
Copyright © 2011-2022 走看看