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

逃离我推掉我的手 2022-12-28 11:26 187阅读 0赞

解决：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>
        
        
        
        <h2 class="flex-center ellipsis">我啊你就像老鼠的凤山街道</h2>
        <h2 class="flex-center "><span class="ellipsis">我啊你就像老鼠的凤山街道</span></h2>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 flex弹性布局模式下文字超出显示省略号

> 都知道flex弹性布局非常好用，会随分辨率不同，宽高自适，那怎么来设置在一定范围内的文字超出隐藏，显示省略号呢？其实也不难看如下就是使用flex布局的 ![在这里插

小灰灰/ 2023年07月04日 06:23/ 0 赞/ 12 阅读

相关 CSS3 flex配合float实现文字针对图标自适应溢出隐藏

需求：第一行文字相对后面的图标自适应溢出隐藏(图标宽度随机) 卡片采用flex布局宽度不固定(自适应父元素宽度变化)，左侧复选框固定宽度，右边自适应占满剩余宽度，右边第一

ゝ一世哀愁。/ 2023年06月23日 02:58/ 0 赞/ 5 阅读

相关 css单行文字和多行文字溢出隐藏

单行文字溢出隐藏步骤 1. 强制文字一行显示 white-space: nowrap; 1. 将多余的文字隐藏 overflow: hidden

电玩女神/ 2023年02月21日 06:47/ 0 赞/ 18 阅读

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

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

逃离我推掉我的手/ 2022年12月28日 11:26/ 0 赞/ 188 阅读

相关 uni-app文字溢出隐藏

![20210620142453677.png][] 文字放在text中 <view class="cardlist-content-title"> <t

本是古典何须时尚/ 2022年10月08日 05:47/ 0 赞/ 173 阅读

相关溢出的文字隐藏

word-break自动换行 word-break：normal | break-all | keep-all normal 使用浏览器默认的换行规则。 bre

痛定思痛。/ 2022年05月16日 11:09/ 0 赞/ 227 阅读

相关 flex布局

转自阮一峰http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一、什么是flex 任何元素都可定义为flex布

港控/mmm°/ 2022年04月02日 06:11/ 0 赞/ 355 阅读

相关 Flex布局

之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。现在总结下大概的用法。 flex是把一个div分成

待我称王封你为后i/ 2021年11月05日 15:44/ 0 赞/ 497 阅读

相关 Flex布局

在我看书学习flex布局有疑惑后，在网上搜到了这篇文章，讲的很详细，一遍就差不多了就懂flex布局了，感谢原作者！上上下下读五六遍，在其中纠正了一些错别字、加粗了一些文字、

秒速五厘米/ 2021年09月20日 15:42/ 0 赞/ 518 阅读

相关 flex布局

flex布局传统布局与flex布局传统布局 flex 弹性布局 flex布局原理 flex布局父项常见属性 f

旧城等待，/ 2021年06月24日 13:58/ 0 赞/ 587 阅读