Add Ellipsis to Long Text

Today I wanted to show you different techniques to handle long form text. By default things are handled well by browsers. But sometime we have fixed layout and the content is user generated. Text could be single line like Title, Subtitle and multiline as description

 That how text looks when there are no constraints. Text falls to next line where there is not enough room. Let’s look at some examples

I am going to use List Group Component of Bootstrap

<div class="container">
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in lorem ipsum</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac justocer</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

What happens when we have layout constraint. For instance we don’t want the text to wrap to next line. That’s how it’s handled in the browser

.list-group-item{
  white-space: nowrap;
}

But that is bit weird, our text goes beyond its container. Overlapping the boundaries. Let’s see if there is any fix for it.

.list-group-item{
  white-space: nowrap;
  overflow: hidden;
}

Hold on we have wiped the text that was falling outside, but things still ain’t pretty from inside as well. Crippled text

Final Solution for Single Line Text

.list-group-item{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Now it looks much better. There are constraints and we are not going aggressive with trimming of text.

Truncate Multiline Text with Ellipsis

Let’s code for our next example.

<div class="container">
  <h1>Description</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus magni, cumque obcaecati at accusamus voluptatem facilis eligendi quos ea ex unde? Praesentium nemo alias voluptates doloribus, repellat vel exercitationem aperiam! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi, adipisci minima aspernatur nemo nisi laborum quas odio fugit modi ipsam quibusdam reprehenderit. Inventore in expedita corrupti illum eius quibusdam suscipit.</p>
</div>

.container{
  margin-top: 50px;
  border:8px solid steelblue;
  border-radius: 8px;
}

But we are only allowed to show first three lines of description. 

.container{
  margin-top: 50px;
  border:8px solid steelblue;
  border-radius: 8px;
  max-width: 540px;
	
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

This is pure css solution. But we have to watch out for the browser support for -webkit-box , currently works best in chrome (I don’t know whether it’ll will be implemented). We also need to adjust markup as well, number of lines we are providing. In order to have better support we can always go for JavaScript solution

JavaScript Solution for Multiline Text

.container{
  margin-top: 50px;
  border:8px solid steelblue;
  border-radius: 8px;
  max-width: 540px;
  overflow: hidden;
}

Our CSS is back to normal.

const text = document.querySelector('.container p');
text.textContent = text.textContent.slice(0,200).trim().concat('...')

There is chain of string functions used.

1. The slice function extracts first 200 words.
2. Trim removes leading and trailing spaces. There is a chance that 200 words finishes with trailing empty space. It’s weird to add ellipsis to it (for example: Lorem ipsum d …)
3. Concat adds the ellipsis

Output

See the Pen Truncate Multiline text with ellipsis by Samiullah Khan (@samiullah1989) on CodePen.6143