Welcome to WebmasterWorld Guest from 3.214.184.196

Forum Moderators: not2easy

Message Too Old, No Replies

Truncate multi-line text and keep it centered

     
7:04 pm on Jul 28, 2016 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


I've been battling with this for most of the day and beginning to think it's simply not possible.

I have a div 100% wide by a set height i.e. 60px. In that there's some text that could be a few words or could be a lot and so need to truncate it but it will span over 2-3 lines. But I also need to keep whatever text is in that div centered horizontally and vertically.

I've tried to use the dotdotdot script but that does't work when you're centering vertically i.e. using a table-cell.

Any ideas or help would be greatly appreciated.
7:56 pm on July 28, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:958
votes: 33


I found one solution online. Dunno if it would work for you. Search on "Pure CSS for multiline truncation with ellipsis".
11:35 am on July 29, 2016 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


Thanks for this but they're not ideal solutions. The main issue is I still would not be able to centre text vertically within the block.
2:50 pm on July 29, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4504
votes: 347


Can you share the CSS that defines the block? Without seeing what is there it is difficult to guess what might help.