テキストが親の 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;
}
目標: (カーソルを合わせる)
