CSS text overflow: ellipsis

Single line ellipsis

Here is the code we use

  <div>
    Hello world once again!
  </div>

1 You first need to set:

  overflow: hidden;
  text-overflow: ellipsis;

Not enough, as you can see

Hello world once again!

2 You need to set a width

  width: 120px;

Hello world once again!

2 Or a max width

  max-width: 120px;

Hello world once again!

Still not enough...

3 You also need...

  white-space: nowrap;

Hello world once again!

Hello world once again!

4 Conclusion

  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  white-space: nowrap;