[Help] Limiting text characters

1505703852
Phillip G.
Pro
Sheet Author
I am trying to setup the roll template on my character sheet so that it will only display a certain number of textual characters (in my case, I think 27 is the optimum number.) Is there a way to do this with the roll template HTML code or in the CSS for the table being displayed. I have tried to use white-space: nowrap, but this distorts the tables background image. I am sure the background becomes distorted because it is using three different images with only one of them repeating. I would be happy to discuss what I am looking for in my campaign or over some other VOIP. I'm sure seeing what I am talking about would make more sense. Thanks in advance for any help.
1505760391
Brian
Pro
Sheet Author
API Scripter
You can combine white-space: nowrap with overflow: hidden (and maybe text-overflow: ellipsis). That will cut off the text at the parent container's width rather than a specific number of characters, but it approaches what you seem to be looking for. (Of course, if the font is monospaced, all characters are the same width, so cutting of the text at a specific width is the same as cutting it off at a specific number of characters.)
1505785543
Phillip G.
Pro
Sheet Author
Thanks for the suggestion Brian. Actually overflow: hidden and ellipsis didn't seem to work. Maybe I will try them again and see if there was something else buggering it up.
1505840620
Brian
Pro
Sheet Author
API Scripter
Does the element containing the text you're trying to clip have display: inline? Because that won't overflow. If that's the case, try changing it to display: inline-block.
1506564930
Phillip G.
Pro
Sheet Author
This did not work out well. I can get the text to stay on a single line, but overflow does not get hidden and the whole thing changes the appearance of the roll template. Could this problem be related to the fact that it is a portion of a table?
1506965285

Edited 1506965299
Brian
Pro
Sheet Author
API Scripter
In a table cell, you should be able to add max-width  (on the td) to get text-overflow to work.
1508468167
Phillip G.
Pro
Sheet Author
Thanks again Brian. Max-width plus white space no wrap seems to have solved the problem.