html - 溢出与显示内联一起工作

Question

当我使用 display: inline 时，Overflow 似乎不起作用。我需要内联文本，因为它出现在网页的右上角，前面有“Hello”，名称后面有一个下拉箭头。如果我删除 display: inline，溢出会起作用，但前面的单词和名称后面的图像会掉到新行。我尝试使用内联 block ，但这会导致文本实际换行，尽管它是隐藏的，但名称看​​起来像是我上标的。

如何制作这个工作属性？

div.actualName {
  display: inline;
  width: 40px;
  height: 20px;
  overflow: hidden;
}

This is
<div class="actualName">Bobby Joe Sanders</div>computer.
<br/>

Answer 1

使用 inline-block 但添加 vertical-align:top 规则。内联元素的默认垂直对齐方式是基线。

div.actualName {
  display: inline-block;
  width: 40px;
  height: 20px;
  overflow: hidden;
  vertical-align:top;
}

This is
<div class="actualName">Bobby Joe Sanders</div>computer.
<br/>