0

Possible Duplicate:
With CSS, use “…” for overflowed block of multi-lines

Is there way to truncate lines of a paragraph in css? e.g. i have 7 line paragraph, and I want them to truncate into 3 lines. I have tried this: p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } but it will form 1 line truncated

Community
  • 1
  • 1
Lizza Faith
  • 403
  • 1
  • 9
  • 20
  • You might be able to hack something with `em`s, but I don't think this is possible with just CSS: http://jsfiddle.net/B4w3B/1/ – Blender Oct 17 '12 at 08:21
  • http://stackoverflow.com/questions/802175/truncating-long-strings-with-css-feasible-yet – Joel Dean Oct 17 '12 at 08:21

1 Answers1

0

Use css code as

p{
height: 50px; //depends up on whatever you want
width: 100%
// add your css code
}
Selvamani
  • 7,434
  • 4
  • 32
  • 43
  • have tried putting height on

    but still the it displays 1 line

    , need it in 3 lines then "..." is there any css rule i should to achieve 3lines

    while truncated?

     – Lizza Faith Oct 17 '12 at 09:23
  • 1
    http://jsfiddle.net/st8q2/ try this. if it not work add `!important` to every css code. – Selvamani Oct 17 '12 at 09:42
  • have tried you code, but the "..." not working, is truncate good for 1 line? – Lizza Faith Oct 18 '12 at 03:04
  • try to add class or id in `p` like this http://jsfiddle.net/st8q2/1/ – Selvamani Oct 18 '12 at 04:33
  • In your http://jsfiddle.net/st8q2/1/ yes it forms three lines but the declaration: text-overflow: ellipsis; - not working, no "..." showing up. – Lizza Faith Oct 18 '12 at 06:00
  • see here http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines. if you not satisfy, I suggest you to, post this question in new one. – Selvamani Oct 18 '12 at 08:53