How to set max length in text

Question

How to set max length from a text and end it with ...?

I already tried substr, but it just cut first and last text.

What I want is, for example I have a div with width: 500px and height: 500px

when the text exceed height, text will cut with ....

I want like this

I tried like this but, text will cut when exceed width not height.

I used following css :

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Answer 1

Javascript way

Check this answer smart way to shorten long strings with javascript

PHP way

I use this php helper function before sending text to browser:

function readMoreHelper($story_desc, $chars = 100) {
  if (strlen($story_desc) <= $chars)
    return $story_desc;
  $story_desc = substr($story_desc,0,$chars);
  $story_desc = substr($story_desc,0,strrpos($story_desc,' '));
  $story_desc = $story_desc." ...";
  return $story_desc;
}

So, in your handler you could pass your text as below

readMoreHelper($yourLongText, 200)

Answer 2

With CSS you can use :

-webkit-line-clamp: 3; //number line allow
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;