在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 如何僅用css實(shí)現(xiàn)文本溢出(ellipsis)與其他元素在同行(兼容ie9)

如何僅用css實(shí)現(xiàn)文本溢出(ellipsis)與其他元素在同行(兼容ie9)

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

預(yù)期效果：如果文本不夠長，不需要溢出，.icon元素緊跟在文本后；如果文本過長則溢出，.icon元素緊跟在...后不換行。
需要兼容到ie9，求大神解答

回答
編輯回答
凹凸曼

給 p.text 一個(gè) max-width 吧，保證不換行，然后再用 text-overflow。看起來后者可以支持到 IE6：https://developer.mozilla.org...。

如果不行只好 JS 了。

2017年5月30日 16:23
編輯回答
萢萢糖
<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;
}

clipboard.png

希望對(duì)你有幫助

2017年1月31日 09:12