Slice text within width of p tag

Question

I have a p tag with fix width. If a long sentence came then that sentence should be sliced automatically like in the figures below.

enter image description here

So this sentence should show like this.

enter image description here

I tried many Css options like word-wrap and text-overflow but nothing work. Some makes width increase and some make other issues. I also tried overflow:hidden, this hides second line but did not add ... at the end of first line.

Have you looked in to truncation plugins such as http://dotdotdot.frebsite.nl/ ? — Wayne Austin, Sep 27 '13 at 08:02
you must use ellipsis in text-overflow style with overflow hidden. — Sunil Verma, Sep 27 '13 at 08:06

score 8 · Accepted Answer · answered Sep 27 '13 at 08:00

8

use :

p {
    text-overflow: ellipsis;
    display block;
    width: 100px;
    overflow: hidden;     
    white-space: nowrap;
    padding: 5px;
    border: solid 1px #000;
}

Example: http://jsfiddle.net/ezywm/2/

answered Sep 27 '13 at 08:00

SKeurentjes

1,848
12
18

score 0 · Answer 2 · edited May 23 '17 at 10:32

Check this previous stackoverflow question for this answer Insert ellipsis (...) into HTML tag if content too wide

We can make this effect with the help of jQuery also.

check out the dotdotdot jQuery plugin.

CSS3:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>ellipsis</title>
    </head>
    <style type="text/css">
   p {
        border: 1px solid #CCCCCC;
        overflow: hidden;
        padding: 2px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 250px;
       } 
    </style>
    <body>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </body>
    </html>

Slice text within width of p tag

2 Answers2