通知
  • 关于网站更多信息请加QQ群(1061691290)
  • jpress升级到4.x，显示有些问题，修复中
  • 网站还会持续更新
文章来源于网络，无法注明出处的还请谅解，如果出处注明错误（如仍是载转），请联系我修改

css-flex弹性布局，不用javascript内容就能平均分布，单行或多行文本溢出省略号显示（转载）

1284人浏览 / 0人评论 / 页 | 这是对我有帮助的文章  | 分类： 计算机语言  | 标签： 转载  | 

flex 弹性布局特性详解：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

问题：容器内的内容平均分布后danh单行文本溢出有问题，单行文本或多行文本溢出，用省略号显示，单行文本white-space:nowrap 没反应问题

解决办法：flex布局特性，使用多行文本溢出省略号显示，解决单行文本省略号的问题

css代码:


        #box{
            width: 100%;
            display: -webkit-flex;
            display: -webkit-box;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
 
        }
        .boxInfo{
            flex-basis:100%;/*平均分布方法1*/
 
            /*-webkit-box-flex: 1;
            -webkit-flex: 1;
            flex:1;*//*平均分布方法2*/
 
            height: 20px;
            font-size:14px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:1;
            -webkit-box-orient:vertical;
 
            /*white-space: nowrap;*//*单行文本溢出会出现问题这条代码，所以用多行文本溢出来避免*/
 
        }

html代码:

<body>
 
<div id="box">
    <div class="boxInfo" style="background-color: red">
        <h3>文字文字文字文字费劲啊就是靠金卡吉萨快点见到我的哈哈吓唬大家是拉到了酒啊</h3>
    </div>
    <div class="boxInfo" style="background-color: green">
        <h3>咯大开杀戒的就看动漫几乎</h3>
    </div>
    <div class="boxInfo" style="background-color: orange">
        <h3>加紧对我看见看见撒娇就发哈凯撒科技圣诞节卡加斯哈市的好阿萨德哈哈撒恒大和撒谎交互设计的很婚纱哈市的好结婚</h3>
    </div>
</div>
 
</body>

 

亲爱的读者：有时间可以点赞评论一下

你并不漂亮，可我第一眼看就喜欢
点赞(0) 打赏

相关文章

J2EE十三个规范（转）
J2EE十三个规范（转）
Java开发必须掌握的 21 个 Java 核心技术！（转）
Java开发必须掌握的 21 个 Java 核心技术！（转）
Java开发人员必知必会的20种常用类库和API（转）
Java开发人员必知必会的20种常用类库和API（转）

作者其它文章

四章 随机变量的数字特征
四章 随机变量的数字特征
软件工程概论（第五版）6.3建立对象模型
软件工程概论（第五版）6.3建立对象模型
英语词汇学习知识
英语词汇学习知识

全部评论

还没有评论！