-1

I my page i have a panel and a table in the panel, this is my code in JSFiddle

I have a problem in my code, in td of table i have text and i set text-overflow for that but it doesn't show correctly. it shows like this :

enter image description here

But i want text shows like this:

enter image description here

How can i fix it?

Elham Gdz
  • 1,015
  • 3
  • 15
  • 31
  • 2
    why do you use `white-space: nowrap;`, remove it and look for result – FLCL Jan 28 '14 at 07:46
  • as FLCL says remove white-space: nowrap; and see the result here http://jsfiddle.net/nmW3B/4/ – Karuppiah RK Jan 28 '14 at 07:52
  • Removing `white-space: nowrap;` won't do what OP wants. He does want to wrap it, only after more characters are shown. Because he used the same text twice in his example it's quite confusing. But he wants to cut of the text after the first fringilla. – timo Jan 28 '14 at 07:54
  • `text-overflow: ellipsis;` does not work on multi-line strings http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines – Prinzhorn Jan 28 '14 at 07:55
  • @FLCL: you right but it doesn't show ... at the end. i want text shows like the second image that i upload. – Elham Gdz Jan 28 '14 at 07:58
  • @ElhamGdz, hm, I have understand. Try to change `info-table td` css selector to `info-table td p`, and `...` will appear, but the problem may be that as @Prunzhorn said it will not work on multi-line strings – FLCL Jan 28 '14 at 08:05
  • So we have 5 incorrect answers below:) and look like 1 correct! – FLCL Jan 28 '14 at 08:07
  • @FLCL: you right i change `info-table td css` selector to `info-table td p` and `...` will appear, but just one line will show, i want show more than one line, it means no way for this? – Elham Gdz Jan 28 '14 at 08:13
  • @Felix answer is correct for chrome, hope you may find solution for other browsers – FLCL Jan 28 '14 at 08:15

6 Answers6

3

You can give your paragraph a class for easier to manage:

<p class="text">...............</p>

Then you can use following css properties to achieve your task:

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;    
    -webkit-line-clamp: 6; 
    -webkit-box-orient: vertical;
}

Updated Fiddle

Felix
  • 37,892
  • 8
  • 43
  • 55
  • Only answer that understood the OP question so it seems =). Is there a crossbrowser alternative for this? – timo Jan 28 '14 at 08:16
  • @Felix: your answer just correct for chrome, it doesn't work in FireFox, do you have any idea ? – Elham Gdz Jan 28 '14 at 08:25
  • 1
    For firefox, the alternative way is to use a fade out fallback, check this article from `csstricks`: http://css-tricks.com/line-clampin/ – Felix Jan 28 '14 at 08:37
0

try something like this,FIDDLE

change your code

FROM THIS

.info-table td {
    overflow: hidden;
    text-overflow: inherit;
    white-space: pre-line;
}

TO THIS

.info-table td {
    overflow: hidden;
}

EDITED CODE FIDDLE

.info-table td p{
    max-height:260px;
    line-height: 18px;
    text-align: justify;
    font-size: 10px;
    font-weight: normal;
}
rajesh kakawat
  • 10,826
  • 1
  • 21
  • 40
0

hope it will help you, remove the text-overflow and white-space from td.

.info-table td {
overflow: hidden;
}

demo

Venu immadi
  • 1,585
  • 11
  • 20
0

remove the white-space: nowrap; property in your css, you will get

Nagesh Reddy
  • 9
  • 3
0

Actually overflow works only on single line that's why your all content shrink onto one line.

you may use some jQuery/Javascript library like this http://pvdspek.github.com/jquery.autoellipsis/ or try a pure css solution using this tuts http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

kp singh
  • 1,430
  • 8
  • 21
-2

increase the height of div. i think due to less size it showing like this

Sanket
  • 165
  • 6