I am currently creating a blog site and on home page, I only want 100 character of the paragraph to show.After that I want only ...(3 dots) to shown How can I do that using javascript or css? enter image description here
I want it to look like: enter image description here
Using Only Html & Css, you can use something like this:
p {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Here are some examples of that: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
Using Javascript, you could use something like this:
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 this
document.querySelector('p').innerText = truncateText('p', 107);
Here's an example of that: http://jsfiddle.net/sgjGe/1/