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

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

834人浏览 / 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（转）

作者其它文章

Java开发必须掌握的 21 个 Java 核心技术！（转）
Java开发必须掌握的 21 个 Java 核心技术！（转）
菜鸟教程LINUX Shell 输入/输出重定向
菜鸟教程LINUX Shell 输入/输出重定向
偏导数与二重积分的计算习题课
偏导数与二重积分的计算习题课

全部评论

还没有评论！