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;