如何仅用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

给 p.text 一个 max-width 吧，保证不换行，然后再用 text-overflow。看起来后者可以支持到 IE6：https://developer.mozilla.org...。

如果不行只好 JS 了。

Answer 2

<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;
}

希望对你有帮助