使span不包裹在具有固定宽度的其他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

添加到跨度的CSS white-space: nowrap

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

当文本被截断时得到一个不错的“ ...”