如何仅用css实现文本溢出(ellipsis)与其他元素在同行(兼容ie9)

Question

<div class='box'>     <p class='text'>这是一段长文本这是一段长文本这是一段长文本<p>     <div class="icon"></div> </div>.box {    width: 175px; }.icon {    display: inline-block;    width: 20px;    height: 20px;    background: red; }预期效果：如果文本不够长，不需要溢出，.icon元素紧跟在文本后；如果文本过长则溢出，.icon元素紧跟在...后不换行。需要兼容到ie9，求大神解答

Answer 1

<div class='box'>    <p class='text'>这是一段长文本这是一段长文本这是一段长文本<p>
    <div class="icon"></div></div>

.box {    width: 175px;    display: table;    table-layout: fixed;    border-collapse: collapse
}p {    display: table-cell;    text-overflow: ellipsis;    white-space: nowrap;    overflow: hidden;
}.icon {    display: table-cell;    width: 20px;    height: 20px;    background: red;
}

希望对你有帮助