0

I have multiple titles with different lenghts and i would like them to always take 1 line and leave suspension points/ellipsis (...) if they can't fit. I can't just change the text inside the divs because the h2s inside them will automatically change everyday.

Heres my code: http://jsfiddle.net/FranLegon/k9LsLuuk/

You can see what I want to achieve at Medium : https://i.stack.imgur.com/q2Jc3.png

PS: If my english isn't good enough feel free to edit my question

EDIT: I got an asnswer that works perfectly for 1 line, but now I want the text to take 2 lines instead. Any ideas?

FranLegon
  • 87
  • 1
  • 2
  • 9
  • I have used this module: https://www.npmjs.com/package/ellipsize for this kind of situation. Check if it can help you. – Kev Feb 26 '15 at 14:30

1 Answers1

1

Since luckily you want one line,

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

should work for you. MDN docs., fiddle

Ulrich Schwarz
  • 7,598
  • 1
  • 36
  • 48
  • @FranLegon: Then you're currently out of luck with pure CSS, but http://stackoverflow.com/a/7680712/505649 has some good pointers. – Ulrich Schwarz Feb 26 '15 at 18:26