Truncating text with "text-overflow: ellipsis"

Question

I have a module in the form:

.container {
  width: 250px;
  height: 50px;
  background: #fffff3;
}
.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="container">
  <p class="truncate">
    <span>Some loooooooooooong name</span>
    :
    <span>1.7m</span>
    m Tall
  </p>
</div>

Which should render as:

Some customer name: 1.7m Tall

I want this to truncate so that if the name is too long it will look like:

Some long name...: 1.7m Tall

I've tried using the above truncate class but it appears like this:

Some loooooooooooong name...

With the users height off the screen. What can I do to rectify this?

What is the problem? The height? Then remove `height: 50px;`? — nicael, Jun 16 '16 at 16:39
@nicael - I believe the OP means the text `1.7m Tall` by height — j08691, Jun 16 '16 at 16:41

score 3 · Accepted Answer · answered Jun 16 '16 at 16:42

You need to set ellipsis for the name element, to make it work you need also a fixed width and because it's a <span> you also need to change the display:

.container {
  width: 250px;
  height: 50px;
  background: #fffff3;
}
.truncate {
  display: inline-block;
  vertical-align:middle;
  width: 120px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="container">
  <p>
    <span class="truncate">Some Looooongggg nameee</span>
    :
    <span>1.7 </span>
    M Tall
  </p>
</div>

Stickers · Answer 2 · 2016-06-16T17:33:16.137

Try using flexbox layout, and set ellipsis on the first span only. It also supports dynamic length of the spans and plain text.

.truncate {
  display: flex;
  align-items: center; /* vertically center text */
  white-space: nowrap;
  width: 250px;
  height: 50px;
  padding: 0 8px 0 4px;
  background: gold;
}
.truncate span {
  min-width: 0;
  padding: 0 4px;
}
.truncate span:first-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex: 1; /* to take as much space as available */
}

<p class="truncate">
  <span>Looooooooooooooooooooooong name</span> :
  <span>1.7m</span> M Tall
</p>

Truncating text with "text-overflow: ellipsis"

2 Answers2