爲什麼包裝文本會導致div框向上移動？

Question

我想要的東西其實是有1個或最多2行文字，如果用省略號再被截斷。它沒有顯示，由於某種原因時，它的內部.cell股利超過2行文字，然後將文本框是跳躍起來。

body { 
 
    background-color: transparent; 
 
    overflow-y: hidden; 
 
    margin: 0; 
 
} 
 

 
div { 
 
    font-size: 20px; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.container { 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
    overflow-y: hidden; 
 
    font-size: 0; 
 
    height: 100vh; 
 
} 
 

 
.row { 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
    font-size: 0; 
 
    background-color: cyan; 
 
} 
 

 
.cell { 
 
    display: inline-block; 
 
    white-space: normal; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: lime; 
 
    margin: 5px; 
 
    padding: 0px; 
 
    z-index: -1; 
 
} 
 

 
.cellDummy { 
 
    display: inline-block; 
 
    white-space: normal; 
 
    height: 200px; 
 
    background-color: blue; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    z-index: -1; 
 
}

<div class="container"> 
 
    <div class="row" id="row0"> 
 
    <div class="cellDummy" style="width: 740.5px;">boo</div> 
 
    <div class="cell">1 ahsdjkha sdjha kshd kajhs dajhsdk</div> 
 
    <div class="cell">2</div> 
 
    <div class="cell">3</div> 
 
    </div> 
 
</div>

所以，問題是如何排隊.cell盒甚至有2行文字？如果文本不適合2行（或者框的高度的10％），如何進行省略號？

更新 現在更改垂直對齊.cellDummy框跳轉。

Answer 1

因爲行內元素的默認垂直對齊方式爲baseline，這是你所看到的。嘗試將其更改爲top：

body { 
 
    background-color: transparent; 
 
    overflow-y: hidden; 
 
    margin: 0; 
 
} 
 

 
div { 
 
    font-size: 20px; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.container { 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
    overflow-y: hidden; 
 
    font-size: 0; 
 
    height: 100vh; 
 
} 
 

 
.row { 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
    font-size: 0; 
 
    background-color: cyan; 
 
} 
 

 
.cell { 
 
    display: inline-block; 
 
    white-space: normal; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: lime; 
 
    margin: 5px; 
 
    padding: 0px; 
 
    z-index: -1; 
 
    vertical-align:top; 
 
} 
 

 
.cellDummy { 
 
    display: inline-block; 
 
    white-space: normal; 
 
    height: 200px; 
 
    background-color: blue; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    z-index: -1; 
 
}

<div class="container"> 
 
    <div class="row" id="row0"> 
 
    <div class="cellDummy" style="width: 740.5px;">boo</div> 
 
    <div class="cell">1 ahsdjkha sdjha kshd kajhs dajhsdk</div> 
 
    <div class="cell">2</div> 
 
    <div class="cell">3</div> 
 
    </div> 
 
</div>

要設置你需要定義text-overflow和overflow性能省略號。