Is there a way to prevent the contents of a 100% width span from wrapping when the text exceeds the parent's width? I've tried using whitespace: nowrap; without success.
ISSUE: The text within span.firstname, span.lastname, and span.email wraps when it's longer than the content within div.name, div.personal, or div.account_view. Ideally, I want these spans to expand as needed without wrapping.
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"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6f676b63664a6f676b636624696567">[email protected]</a></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;
}
OBJECTIVE: (hover over)