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!!
You can play around with a
overflow
property (actually there are couple of them –overflow-x, overflow-y
andoverflow
), also you have to set thewidth
in absolute units (read pixels or em, but not in percentage) of yourdiv
.For example (CSS):
Also you can limit your text with simple PHP code:
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 (alsoarchive.php
file), they are inside your template directory. Find the following code in those files:the_content()
andthe_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); ?>
There are two ways you can achieve this :
1) CSS way
add the css property 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 cssborder:none
property.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/
One limitation is that you are restricted to use one row.
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
andtext-overflow
properties, but not based on content. You can easily fix it on the server side though:This inserts an ellipsis after 250 characters if the text is longer than that.
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:
CSS Code:
Tested under FF, Chrome, IE11
This is my solution demo: limit-printed-words.html
It works well with any nested level and even button content.
Source project: scriptbucket