亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

明月笑刀無情 2018-08-03 17:40:57
<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,求大神解答
查看完整描述

2 回答

?
largeQ

TA貢獻2039條經驗 獲得超8個贊

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

https://img1.sycdn.imooc.com//5b66c45c0001acbe02050042.jpg

希望對你有幫助


查看完整回答
反對 回復 2018-08-05
  • 2 回答
  • 0 關注
  • 998 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號