Shortening text in CSS

Question

I have a table set up with five columns, each with their own text. When the app is resized, what can I do to the CSS in order to shorten the text to the first three characters? I have this added in the CSS file for adjusting to the app size:

@media (max-width:499px) {
}
What would I add here in order to limit the text to three characters only when the app is less than 500px?

Answer 1

Not characters, but you can set a width of an element in pixels and use text-overflow property which should add "...".

Also, you can limit number of lines by setting height of an element to, for instance, 30px and setting line-height CSS property to 15px and add "margin:0px;padding:1px 5px;border:0px;font-size:14px;vertical-align:baseline;background-color:#eeeeee;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;white-space:pre-wrap;">

Example.

HTML

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "text-:</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "text-:</p>
<div id="div2">This is some long text that will not fit in the box</div>

CSS

#div1
{
white-space:nowrap; 
width:12em; 

text- 
border:1px solid #000000;
}

#div2
{
white-space:nowrap; 
width:12em; 

text- 
border:1px solid #000000;
}

Answer 2

I prefer the look better when using text-overflow: clip property, but this only clips the text once it reaches the width of the element and often shows half of characters. How could I specify where the text is cut off? I was thinking some way of using the substring() method in the javascript file. Could this work?

Edit:

This way was actually simpler than I thought. Using the substring() method worked just fine.