Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to limit the length of text in a paragraph [duplicate]

Tags:

I have a paragraph as below, which may be of any length:

Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book written by Rajiv Malhotra and Aravindan Neelakandan which argues that India's integrity is being undermined.

I want it to appear as:

Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book written by Rajiv Malhotra...

below is the code which populates description in my website:

currently description goes to any no. of line based on product, i need to limit this to 3 lines.

like image 399
user3193385 Avatar asked Jan 30 '14 03:01

user3193385


People also ask

How do I limit text in span?

You can use the CSS property max-width and use it with ch unit. And, as this is a <span> , use a display: inline-block; (or block). Thanks , max-width: 13ch and display:inline-block allow me to concatenate text one by one with fixed size.

How do you limit words in a paragraph?

Right-click the text box for which you want to limit characters, and then click Text Box Properties on the shortcut menu. Click the Display tab. Under Options, select the Limit text box to check box, and then specify the number of characters that you want.

How do I limit text length in CSS?

If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.


1 Answers

If you want to use html and css only, your best bet would probably be to use something like:

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

Here is an example: http://jsfiddle.net/nchW8/ source: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

If you can use javascript you can use this function:

function truncateText(selector, maxLength) {     var element = document.querySelector(selector),         truncated = element.innerText;      if (truncated.length > maxLength) {         truncated = truncated.substr(0,maxLength) + '...';     }     return truncated; } //You can then call the function with something like what i have below. document.querySelector('p').innerText = truncateText('p', 107); 

Here is an example: http://jsfiddle.net/sgjGe/1/

like image 168
Josh Avatar answered Sep 30 '22 04:09

Josh