Limit the number of words in a div - html

Question

Is there a css property that can limit the number of characters to be displayed in a div.For example
<div class ="main-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
but I need to display only
<div class ="main-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
I am using wordpress site with testimonial feature. So if any customer adds a testimonial, I need to display only the first few words with the link. Please Help!! Thanks!!

Answer 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); ?>

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

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

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

Answer 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

Answer 6

This is my solution demo: limit-printed-words.html
It works well with any nested level and even button content.
Source project: scriptbucket