【css】使用弹性盒子布局时，省略号问题

栗子：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子省略号问题</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
　　
        .ui-flex {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }
        .ui-flex-1 {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }
        .ui-flex-basis{
            flex: 1 0 0;
        }
        .ut-s {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ut-s-line{
            display: -webkit-box; /**对象作为伸缩盒子模型展示**/
            -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
            -webkit-line-clamp: 1; /**显示的行数**/
            overflow: hidden; /**隐藏超出的内容**/
            text-overflow: ellipsis;
            white-space: normal;
            word-break: break-all; /*允许在单词内换行*/
        }
        .ut-s-line2{
            display: -webkit-box; /**对象作为伸缩盒子模型展示**/
            -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
            -webkit-line-clamp: 2; /**显示的行数**/
            overflow: hidden; /**隐藏超出的内容**/
            text-overflow: ellipsis;
            white-space: normal;
            word-break: break-all; /*允许在单词内换行*/
        }
        .main-container{
            width:500px;
            margin: 0 auto;
        }
        .box{
            border:1px solid red;
            padding:10px;
        }
        h6{
            margin:20px;
            text-align: center;
        }
        .box-left{
            width: 200px;
            height: 200px;
            border:1px solid #ccc;
            margin-right: 20px;
        }
        .box-right-bottom{
            padding:10px 0;
        }
        .box-right-top{
            
          
        }
        .box-right-title{
            width:calc(100% - 222px );
        }
    
        
    </style>
</head>
<body>
    <div class="main-container">
        <h6>容器1(ui-flex容器内直接包裹内容，然后使用省略号的css代码即实现
            )</h6>
        <div class="ui-flex box">
            <div class="box-left"></div>
            <div class="box-right ui-flex-1 ut-s">
                我是标题我是表我是标题我是表我是标题我是表我是标题我是表
            </div>
        </div>
     
        <h6>容器2</h6>
        <div class="ui-flex box">
            <div class="box-left"></div>
            <div class="box-right ui-flex-1">
                <div class="box-right-top ut-s">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div>
                <div class="box-right-bottom"> 2023年1月12日</div>
            </div>
        </div>

        <h6>容器3（对象作为伸缩盒子模型展示 display:box）</h6>
        <div class="ui-flex box">
            <div class="box-left"></div>
            <div class="box-right ui-flex-1">
                <div class="box-right-top ut-s-line">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div>
                <div class="box-right-bottom"> 2023年1月12日</div>
            </div>
        </div>

        <h6>容器4(指定弹性元素的宽度)</h6>
        <div class="ui-flex box">
            <div class="box-left"></div>
            <div class="box-right ui-flex-1" style="width:calc(100% - 222px)">
                <div class="box-right-top ut-s">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div>
                <div class="box-right-bottom"> 2023年1月12日</div>
            </div>
        </div>
        




    </div>
    
</body>
</html>
【css】使用弹性盒子布局时，省略号问题

栗子：

效果：

相关资料：

导航

公告
