Eliminate span line break without moving text to new line - css

Question

I have this right now:
#outer-div {
border: 1px dashed red;
line-height: 50px;
width: 350px;
}
.inner-div {
border: 1px dashed red;
float:left;
height: 50px;
width:80px;
}
#title {
/*white-space: nowrap;*/
}
<div id="outer-div">
<div class="inner-div"></div>
<div class="inner-div"></div>
<span id="title">Random long text not to break<span>
</div>
and it looks like:
and I'd need this:
Tried solutions from other threads but they not work as this. white-space: nowrap moves the entire span to the next line.
Here is a working code: https://codepen.io/neptune01/pen/ppMyEQ
Can this be done using only css?

Answer 1

It's a bit tricky, but doable using Flexbox (as is almost anything), text-overflow: ellipsis, and, yes, white-space: nowrap :
Bonus: you don't need line-height or float.
#outer-div {
border: 1px dashed red;
width: 300px;
display: flex;
align-items: center;
}
.inner-div {
border: 1px dashed red;
height: 50px;
width: 80px;
flex-shrink: 0;
}
#title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
border: blue dashed 1px;
}
<div id="outer-div">
<div class="inner-div"></div>
<div class="inner-div"></div>
<span id="title">Random long text not to break</span>
</div>

Answer 2

You can do it with the white-space: nowrap together with the text-overflow: ellipsis and overflow: hidden, also the #title span needs to be displayed as block or you can just use another div instead:
#outer-div {
border: 1px dashed red;
line-height: 50px;
width: 350px;
}
.inner-div {
border: 1px dashed red;
float: left;
height: 50px;
width: 80px;
}
#title {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<div id="outer-div">
<div class="inner-div"></div>
<div class="inner-div"></div>
<span id="title">Random long text not to break</span>
</div>

Answer 3

Assign id just to your parent div and not to other elements present inside.
white-space:nowrap makes contents present inside applied div to not wrap them next line, so you need to add overflow:hidden too, which hides content from overflowing outside .title or targeted div, thus this hides content and then apply text-overflow:ellipsis to get (...) in end of overflowed content.
#outer-div {
border: 1px dashed red;
line-height: 50px;
width: 350px;
}
.inner-div {
border: 1px dashed red;
float: left;
height: 50px;
width: 80px;
}
.title {
display: block; /*Changed display to block*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<div id="outer-div">
<div class="inner-div"></div>
<div class="inner-div"></div>
<span class="title">Random long text overflows content out of box.</span>
</div>