css - 使跨度不包裹在具有固定宽度的其他 div 内

Question

当文本超过父级的 100% 时，如何使 100% 宽度跨度的内容不换行？我一直在胡闹whitespace: nowrap;，没有运气。

问题：span.firstname, span.lastname, span.email当内容长于div.name, div.personal, or div.account_view. 我希望 3 个跨度的内容持续多久（不换行）。

HTML：

<div class="account_view">
  <div class="personal">

    <div class="picture">
      <img src="example.png" />
      <span>Image caption</span>
    </div>

    <div class="name">
      <span class="first">Firstname</span>
      <span class="last">Lastname</span>
      <span class="email">email@email.com</span>
    </div>

  </div>
</div>

CSS：

div.account_view {
  display: block;
  height: auto;
  width: 700px;
  padding: 40px;
  margin: 0 auto;
  border: 0;
}
div.account_view div.personal {
  margin: 0 auto;
  clear: both;
  overflow: hidden;
  white-space: nowrap;
}
div.account_view div.personal div.picture {
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  border: 1px solid #aaa;
  margin: 0 10px 0 0;
}
div.account_view div.personal div.picture img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
}
div.account_view div.personal div.picture span {
  display: block;
  font-size: inherit;
  text-align: center;
  margin: 0;
  position: relative;
  top: -27px;
  padding: 5px;
  background-color: rgba(0,0,0,.4);
  color: #eee;
}
div.account_view div.personal div.name {
  float: left;
  position: relative;
  top: -25px;
}

div.account_view div.personal div.name > * {
  display: block;
  font-weight: 300;
  white-space: normal;
}
div.account_view div.personal div.name span.first {
  font-size: 125px;
  font-weight: 700;
}
div.account_view div.personal div.name span.last {
  position: relative;
  top: -9px;
  left: 5px;
  font-size: 56px;
}
div.account_view div.personal div.name span.email {
  font-size: 29px;
  position: relative;
  left: 8px;
}

---

目标：（悬停）

Answer 1

添加到 span 的 CSS white-space: nowrap

此外，您可以使用 text-overflow: ellipsis

当文本被截断时得到一个漂亮的“...”

Answer 2

给 span(s) a display: blockordisplay: inline-block和 set overflow: hidden。