Limit number of Characters in Div with jQuery or CSS

Glenn Glenn's Blog 11 Comments

A quick snippet for you to limit the number of characters in a span / div etc by a particular value. This function also includes a slightly neater … at the cutoff point:-

<script type="text/javascript">// <![CDATA[
$(function(){
  $(".your-div").each(function(i){
    len=$(this).text().length;
    if(len>80)
    {
      $(this).text($(this).text().substr(0,80)+'...');
    }
  });
});
// ]]></script>

Make sure you enter the character value in twice (currently 80).

Limit Number of Characters with CSS

Actually this can also be done very neatly with the ‘ellipsis’ CSS function, but note that this is relatively new and only works on single lines:-

.your-div {
white-space: nowrap;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
}

Its the ‘text-overflow: ellipsis;’ that does all the work, but you do need the other lines for it to work effectively. Then you’ll get the same effect like ‘text stops here …’

About the Author
limit number of characters in div with jquery or css Limit number of Characters in Div with jQuery or CSS 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Developer (WordPress, Webflow, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.

  • Glenn

    This is great! One question: is it possible to somehow ensure that words are not cut off? What would I add to make that happen?

    Otherwise, works like a charm!

  • Nice to see a fellow Glenn with x2 n’s…. in answer to your question we have looked into solutions for this, but so far nothing lightweight. Perhaps others can spread light on getting jQuery to preserve whole words?

    • Elisey

      It seems i found one lightweight solution with indexOf:

      len=$(this).text().length;
      limit=$(this).text().indexOf(" ", 230);
      if(len>250)
      {
      $(this).text($(this).text().substr(0,limit)+'...');

      • Elisey

        Also I’d recommend using ellipsis character “…” instead of separate dots

  • Ayaskant

    Hi nice post about truncating a text string with use of text-overflow:elipsis in css. But i have a problem using this where i want to chop my text exactly after 23 characters. Now the text-overflow is working for me after i set the width:160px , but the problem is that the position where the elipsis are being appended depends on the font style & font size of the characters as well. I mean “abcd-1234” and “ABCD-1234” both have same number of characters but the width: applies differently to each of them. Is there any way to chop the string exactly after lets say 10 characters and the apply
    text-overflow:elipsis to it?

  • Try using the `ch` unit described [in the CSS3 specification](http://www.w3.org/TR/css3-values/#font-relative-lengths):

    > Equal to the used advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it.

    Thus `width: 80ch` specifies an 80 character width limit.

  • Nagendar

    it is very usefull thank you…

  • rahman

    great! work fine for me .. 😀

  • Ramya

    awesome, This piece of jquery works perfect for me 🙂 Thank you

  • manjotsingh

    you can do this with css also]


    p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    }

  • ABHISHEK BHANDARI

    Hello Sir,

    After reading your post I tried to implement the solution you provided to limit number of characters in div. I am trying to do with CSS.

    When I used this code:

    #div2 {
    white-space: nowrap;
    width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    }

    It works fine when my text is mix of lowercase and uppercase letters, however I am not getting accurate result when all letters are in uppercase.

    When text is: “This is some long text that will not fit in the box”
    Output I got: “This is some…”

    When text is: “THIS IS SOME LONG text that will not fit in the box”
    Output I got: “THIS IS SO…”
    Expected Output: “THIS IS SOME…”

    width: 12ch; to limit text of length 12 is not working for me. I have other features to add on top of this and so I can’t use jquery solution.

    If you have any ideas than please guide me. I am very new to CSS.

    Thank you