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.
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.
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.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With