Flex文字溢出省略


单行超出隐藏

CSS

.name{
   display: flex;
   flex-direction: row;
   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">PHP查看程序执行时间PHP查看程序执行时间</div>
</div>


超出两行隐藏

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

© 著作权归作者所有


1