使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

添加到span的CSS     white-space: nowrap

另外你可以使用     text-overflow: ellipsis

得到一个好的“......”当文字被截止时

Answer 2

将范围设为display: block或display: inline-block并设置overflow: hidden。