为什么包装文本会导致div框向上移动？

Question

我想要的实际上是1行或最多2行文本，如果用省略号截断更长的话。它没有显示，并且出于某种原因，当.cell div中的文本超过2行时，该框就会跳起来。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

所以问题是如何排列.cell框甚至2行文本？如果文本不能容纳2行（或者盒子高度的10％），如何制作省略号？

UPDATE 更改垂直对齐后，现在.cellDummy框会跳起来。

Answer 1

因为内联元素的默认垂直对齐方式是baseline，这是您所看到的。尝试将其更改为top：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

要设置省略号，您需要定义text-overflow和overflow属性。