CSS ellipsis breaks sentence up onto new lines

Question

When I have ellipsis on the long word, it breaks id: and the [ ] onto different lines. I can't seem to keep it all together one one line. I've tried white-space: nowrap and display: inline-block. Any ideas?

https://jsfiddle.net/b35m449x/4/

HTML

<div class="container">id: [<div class="trunc">userrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</div>]</div>

CSS

.container {
   display: inline-block;
   white-space: nowrap;
   border: 1px solid black;
   width: 100%;
}
.trunc {
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   white-space: nowrap;
}

score 0 · Answer 1 · answered Oct 15 '16 at 06:08

0

That might be happening because of the usage of another div in your code. If you don't need the div just remove it and modify the container like this:

.container {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
border: 1px solid black;
width: 100%;
}

And it will work fine.

Although if you want separate styling on that particular line (userrr...) then you might want to replace your div with span element. Note that here also you have to define your ellipsis and overflow in the container class.

Hope it helped a bit!

answered Oct 15 '16 at 06:08

Akshansh Jain

297
1
5
19

This almost works, but I need that last close bracket on the end and not going to a line also :) It kind of all needs to be on the same line. – Mel Oct 15 '16 at 06:19
Thank you so far! I tried putting the close bracket in a seperate div and putting floats on the two divs, but that doesnt work to bring it up next to the ... – Mel Oct 15 '16 at 06:21
`.container { display: inline-block; white-space: nowrap; border: 1px solid black; //width: 100%; } .trunc { overflow: hidden; white-space:nowrap; text-overflow:ellipsis; width:150px; display:inline-block; vertical-align:top; }` Make your `trunc` a span and then use this as the CSS and see if it works. – Akshansh Jain Oct 15 '16 at 12:20

score 0 · Answer 2 · edited May 23 '17 at 12:00

Pseudoelements to the rescue! https://jsfiddle.net/0pmzq3p4/

.container {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid black;
  width: 100%;
}
.trunc {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}
.trunc::before,
.trunc::after {
  white-space: pre;
}
.trunc::before {
  content: 'id: [\A\00a0';
}
.trunc::after {
  content: '\A]';
}

<div class="container">
  <div class="trunc">
userrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
  </div>
</div>

Sources:

My knowledge
https://stackoverflow.com/a/17047836/915875
https://stackoverflow.com/a/5467676/915875

score 0 · Answer 3 · answered Oct 15 '16 at 07:29

Find updated fiddle, should work fine. Update in code is:

.container {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid black;
  width: 100%;
  vertical-align:bottom;
}
.trunc {
   width: 20%;
   display: inline-block;
   vertical-align:bottom;
   overflow: hidden;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   white-space: nowrap;
}

notice the additional display: inline-block

Updated fiddle - https://jsfiddle.net/b35m449x/4/

CSS ellipsis breaks sentence up onto new lines

3 Answers3