如何仅用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&nbsp;class='box'>&nbsp;&nbsp;&nbsp;&nbsp;<p&nbsp;class='text'>这是一段长文本这是一段长文本这是一段长文本<p> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="icon"></div></div>.box&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;175px;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;table;&nbsp;&nbsp;&nbsp;&nbsp;table-layout:&nbsp;fixed;&nbsp;&nbsp;&nbsp;&nbsp;border-collapse:&nbsp;collapse }p&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;table-cell;&nbsp;&nbsp;&nbsp;&nbsp;text-overflow:&nbsp;ellipsis;&nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;nowrap;&nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden; }.icon&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;table-cell;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;20px;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;20px;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;red; }希望对你有帮助