javascripthtmlcssnode.jsejs

How can I only show 100 characters of a post?


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


Solution

  • 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/