Limit the number of words in a div

6 comments

1. You can play around with a overflow property (actually there are couple of them – overflow-x, overflow-y and overflow), also you have to set the width in absolute units (read pixels or em, but not in percentage) of your div.

   For example (CSS):

   div.main-text {overflow-x: hidden;width: 200px;} 
   /*This will hide everything, which goes outside of the 200px div*/
   

   Also you can limit your text with simple PHP code:

   if (!function_exists('chop_string')) {
   function chop_string($str, $len) {
       if (strlen($str) < $len)
           return $str;
   
       $str = substr($str,0,$len);
       if ($spc_pos = strrpos($str," "))
               $str = substr($str,0,$spc_pos);
   
       return $str . "Read more...";
   }   
   }
   

   Place the above function in your WordPress theme’s functions.php file and use it like this:

   <?php echo chop_string('Bla bla bla', 5); ?>

   The above code will show only 5 characters from your string and Read more....

   EDIT:

   If you want to cut the title or the generated content which comes from WordPress, then you have to edit your page.php file (also archive.php file), they are inside your template directory. Find the following code in those files: the_content() and the_title(), those 2 functions display actually all information from database.

   So cut them like this:
   <?php echo chop_string(the_title(), 5); ?> or
   <?php echo chop_string(the_content(), 5); ?>

   Log in to Reply

2. There are two ways you can achieve this :

   1) CSS way

   add the css property text-overflow:ellipsis

   .truncate {
     width: 250px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   

   2) Trick way (HTML)

   add a textarea control inside the div and add **maxlength=50** or whatever you need , hide the border using the css border:none property.

   Log in to Reply

3. You can use css ellipsis. Just use it on the text-overflow. It will truncate adapt to the width of you box.

   http://davidwalsh.name/css-ellipsis

   http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

   .main-text {
     width: 250px;
   
   }
   
   .main-text p {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis; 
   }
   

   One limitation is that you are restricted to use one row.

   Log in to Reply

4. No, CSS is presentational, so not involved with the length of specific content. It can clip on presentational properties such as box size with the overflow and text-overflow properties, but not based on content. You can easily fix it on the server side though:

   $text = strlen($text) > 250 ? substr($text, 0, 250).'…' : $text;
   echo "<p>$text</p>";
   

   This inserts an ellipsis after 250 characters if the text is longer than that.

   Log in to Reply

5. With the help of CSS3 property “text-overflow” – you can set the box width, thus resulting with the exact width for ALL divs;

   Text won’t be cut in the middle of the word and it will add “…” at the end of the text, hinting it’s a preview text;

   HTML Code:

   <div id="myDiv">Just some text - you won't see ME!</div>
   

   CSS Code:

   #myDiv {
       background: red;
       color: white;
       font-size: 20px;
       height: 50px;
       overflow: hidden;
       width: 256px;
       white-space:nowrap;
       text-overflow: ellipsis;
   }
   

   Tested under FF, Chrome, IE11

   Log in to Reply

6. This is my solution demo: limit-printed-words.html

   It works well with any nested level and even button content.

   ---

   

   ---

   Source project: scriptbucket

   Log in to Reply