I am trying to make sure all the elements are on the same line, but if the paragraph in the middle is wider than the available space, I want the text to truncate with an ellipsis. If the paragraph isn't wider, the right float should remain on the same line.
Check out the Codepen example here
HTML:
<div id="outer">
<div id="left"></div>
<div id="middle">
<p>Can this paragraph fill the space between the left and right floats without making the right float wrap?</p>
</div>
<div id="right"></div>
</div>
CSS:
#outer {
background-color: #222;
height: 100px;
width: 100%;
}
#left {
background-color: #555;
width: 100px;
height: 100px;
float: left;
}
#right {
background-color: #777;
width: 200px;
height: 100px;
float: right;
}
#middle {
background-color: #999;
height: 100px;
}
#middle > p {
line-height: 100px;
color: #eee;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-family: monospace;
}