How can I only show 100 characters of a post?

Question

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

Answer 1

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/