locked
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?


    Thursday, April 10, 2014 1:57 AM

Answers

  • 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.

    • Edited by JYount Thursday, April 10, 2014 2:59 AM
    • Marked as answer by JYount Thursday, April 10, 2014 10:45 PM
    Thursday, April 10, 2014 2:46 AM

All replies

  • 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;
    }




    Thursday, April 10, 2014 2:19 AM
  • 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.

    • Edited by JYount Thursday, April 10, 2014 2:59 AM
    • Marked as answer by JYount Thursday, April 10, 2014 10:45 PM
    Thursday, April 10, 2014 2:46 AM