CODEWITHSUNDEEP
css
neptune
neptune

Reputation: 1261

Eliminate span line break without moving text to new line

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:

enter image description here

and I'd need this:

enter image description here

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?

Upvotes: 1

Views: 92

Answers (3)

frnt
frnt

Reputation: 8795

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>

Upvotes: 1

Jeremy Thille
Jeremy Thille

Reputation: 26410

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>

Upvotes: 3

VXp
VXp

Reputation: 12118

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>

Upvotes: 2

Related Questions