通知 网站从因情语写改为晴雨,这个网站的模板也从calmlog_ex改为 whimurmur
文章来源于网络,无法注明出处的还请谅解,如果出处注明错误(如仍是载转),请联系我修改

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

293人浏览 / 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) 打赏

全部评论

还没有评论!