html - 当内容比父级宽的跨度时，如何隐藏左侧的溢出并使图像 float 到右侧？

Question

我的 headerDiv 有两个对象，一个标题和一个图像。我希望标题显示在左侧，图像显示在右侧。标题将动态更改为不同的长度。 headerDiv 的宽度应保持不变。如何隐藏h1标签的溢出，显示 float 在header div右侧的img标签？ span 标签在填充图像时将图像推送到下一行。

.headerDiv{
  width: 120px
}

h1 {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

img{
  width: 20px;
  float: right;
}


<div class="headerDiv>
  <h1>
    <span title="text">
      <spring:message code="${title}" text="${title}" />
      <span style="font-weight: normal;">Text</span>
    </span>
  </h1>
  <img src="image.gif"/>
</div>

Answer 1

为“显示”样式(内联 block 、 block )尝试不同的值。