css实现多个div在同一行并且div中内容可断行

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_37164847/article/details/85235111

实现效果:

<!DOCTYPE html>
<html>
<head>
<style> 
    .all{
        display:-moz-box; /* Firefox */
        display:-webkit-box; /* Safari and Chrome */
        display:box;
        width:600px;
        height: 600px;
        border:1px solid black;
    }

    .item{
        -moz-box-flex:1.0; /* Firefox */
        /*-webkit-box-flex:1.0; /* Safari and Chrome */*/
        box-flex:1.0;
        
   text-overflow: ellipsis;
    display: -webkit-box; /*//将元素设为盒子伸缩模型显示*/
    -webkit-box-orient: vertical; /*//伸缩方向设为垂直方向*/
    -webkit-line-clamp: 4;  /*//超出3行隐藏,并显示省略号 */
    width: 130px;
    background: #00F7DE;
    line-height:20px;max-height:80px;
    height: 80px;
    border: 1px solid #000000;
    }

</style>
</head>
<body>

<div class="all">
    <div class="item" id="p1">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
        <div class="item" id="p1">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
        <div class="item" id="p1">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
        <div class="item" id="p1">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
        <div class="item" id="p1">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>
    <div class="item" id="p2">L-测试测试 (99.5%-99.08%) 单位:kg</div>

</div>

</body>
</html>

重点: box-flex 属性

猜你喜欢

转载自blog.csdn.net/qq_37164847/article/details/85235111
今日推荐