2017-03-01 77 views
2

爲什麼text-overflow: ellipsis在我用display: inline-flexdisplay: flex時不工作?我的要求是我必須使用flexbox。text-overflow:省略號不能用inline-flex

.test { 
 
    display: inline-flex; 
 
    line-height: 24px; 
 
    width: 200px; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    background: cyan; 
 
}
<label class="test"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque, at error rerum ab facere cupiditate veniam incidunt modi temporibus explicabo earum molestiae minima facilis a excepturi laborum similique dolore. 
 
    </label>

回答

2

這樣看來,text-overflow: ellipsis不匿名柔性項目工作。將文本包裝在span中,並在那裏應用省略號。

.test { 
 
    display: inline-flex; 
 
    line-height: 24px; 
 
    width: 200px; 
 
    white-space: nowrap; 
 
    background: cyan; 
 
} 
 

 
span { 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}
<label class="test"> 
 
     <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque, 
 
      at error rerum ab facere cupiditate veniam incidunt modi temporibus 
 
      explicabo earum minima facilis a excepturi laborum similique</span> 
 
</label>

1

嘗試在父div設置inline-flex,就像這樣:

.test { 
 
    line-height: 24px; 
 
    width: 200px; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    background: cyan; 
 
} 
 

 
.parent-div { 
 
    display: inline-flex; 
 
}
<div class="parent-div"> 
 
    <label class="test"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque, at error rerum ab facere cupiditate veniam incidunt modi temporibus explicabo earum molestiae minima facilis a excepturi laborum similique dolore. 
 
    </label> 
 
</div>

+0

啊你更快然後我:d – Nicholas

+0

這個bug報告說,問題是「已解決」和「無效」,所以我不確定它是否適用層數。 –

+0

Michael_B感謝您的觀察。 – Syden