Flex文字溢出省略


单行超出隐藏

CSS

.name{
   display: flex;
   flex-direction: row;
}
.name>.text{
   flex:1;
   overflow: hidden;
}
/* 在欲“超出省略的文本”元素内再添加一个元素用来容纳文本 */
.name>.text>*{
   overflow: hidden;
   text-overflow: ellipsis; /* 文本溢出元素时省略号 */
   white-space: nowrap;     /* 规定段落中的文本不换行 */
}


HTML

在欲超出省略的文本元素中再添加一个元素用来容纳文本

<div class="name">
    <div class="flag">Test</div>
    <div class="text">
       <div>PHP查看程序执行时间PHP查看程序执行时间</div>
    </div>
< div>


超出两行隐藏

   overflow:hidden; 
   text-overflow:ellipsis;
   display:-webkit-box; 
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2; 
举报

© 著作权归作者所有


0