テキストを折り返してdivボックスが上に移動するのはなぜですか？

Question

私が望んでいたのは、実際には省略記号で切り捨てられた方が長くても1行または2行までのテキストを持つことでした。それは表示されませんでした.divの中に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>

そこで質問でも、テキストの2行で.cellボックスをラインアップする方法ですか？テキストが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プロパティを定義する必要があると思い省略記号を設定します。