html - 为什么环绕文本会导致 div 框向上移动？

Question

我想要的实际上是有 1 行或最多 2 行文本，如果用省略号截断的话。它没有显示，并且出于某种原因，当它在 .cell 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 属性。