Ruby Truncate method equivalent in CSS

Question

Is there an equivalent of the Ruby truncate method in CSS for a specific number of characters?

I have been reading up on combining different CSS methods such as text-overflow:

but there doesn't seem to be a straight forward solution to replicate the truncate functionality after a specific number of characters such as:

<%= truncate(this.thing, length: 15, separator: '...') %>

@Abhi in that answer the text is truncated after 93 characters. It could work only if the text was monospaced (https://codepen.io/anon/pen/bRELeb) — Fabrizio Calderan, Jun 09 '17 at 14:28
Yes and the text is only on one line. Also, if the text is on more than one line it will not work. — atw, Jun 09 '17 at 14:30
@fcalderan The codepen in the comments looked promising, so I suggested — Abhi, Jun 09 '17 at 14:33

score 0 · Answer 1 · answered Jun 10 '17 at 15:55

0

I did find this css here:

white-space: nowrap; 
width: 15em; 
overflow: hidden;
text-overflow: ellipsis; 
border: 1px solid #000000;

With modern browsers it seems to do what you expect.

answered Jun 10 '17 at 15:55

slowjack2k

I take it this will work only for monospace font ? Because em will not take into account varying character widths. – lorefnon Jun 10 '17 at 16:16
Does it really matter if you see one char more or less? In many cases you don`t have enough space and you want to truncate the string. With rails version you have to take less chars just to be sure it will fit into the reserved space. With css it will always truncated when it does not fit into the reserved space. – slowjack2k Jun 10 '17 at 21:16
It may not matter in this particular context and I am not downvoting the answer because it may satisfy OP's requirement. I am just pointing out that this may not "exactly" do what is claimed. – lorefnon Jun 11 '17 at 11:25

1 Answers1