溢出使用显示内嵌

Question

当我使用display：inline时，

溢出似乎不起作用。我需要内联文字，因为它出现在网页的右上角，其中包含＆＃34;您好，＆＃34;在它前面和名称后面的下拉箭头。如果我删除显示：内联，溢出工作，但然后前面的单词和名称后面的图像下降到一个新行。我尝试使用内联块，但这会导致文本实际换行，虽然它被隐藏了，但这个名字看起来就像我上标了。

如何制作此作品属性？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

使用样式 span 在这个特定示例中可能更有用，而不是应用 div 和类来设置行中的几个单词的样式的文字。跨度更类似于内联元素，而div更像是块元素。如果有帮助，请告诉我！祝你好运。