text overflow in td html

Question

the p doesn't wrap within td, see the demo below:

http://fiddle.jshell.net/Grp2Q/

<td align="left" style="padding:0px; width:200px;">
      <img src="http://placehold.it/200x200" />
 </td>

 <td style="padding-left:20px;max-width:100%;">
  <p>dfgdfgggggggggggggggggggggdfgdfgdfsdsdfdfgdfgggggggggggggggggggggdfgdfgsdfsdsdfdfgdfgggggggggggggggggggggdfgdfgsdfsdsdf</p>
 </td>

@ManishJangirBlogaddition.com obviously he knows that, and that's why he is asking for solution — Mr. Alien
– Mr. Alien, Commented Jan 6, 2014 at 7:35
@ManishJangirBlogaddition.com : no its not necessary to have a space to break the string! — NoobEditor
– NoobEditor, Commented Jan 6, 2014 at 7:35

Mr. Alien · Accepted Answer · 2014-01-06 07:34:11Z

4

You need to break the text, to do that, make your table fixed width and than use word-wrap property with a value of break-word

Demo

table {
    table-layout: fixed; /* Make sure you use this as well */
    width: 100%;
}

td {
    word-wrap: break-word;
}

answered Jan 6, 2014 at 7:34

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NoobEditor · Accepted Answer · 2014-01-06 07:34:42Z

0

use word-break:break-all

demo

<td style="padding-left:20px;max-width:100%;word-break:break-all;">
   <p>dfgdfgggggggggggggggggggggdfgdfgdfsdsdfdfgdfgggggggggggggggggggggdfgdfgsdfsdsdfdfgdfgggggggggggggggggggggdfgdfgsdfsdsdf</p>
</td>

answered Jan 6, 2014 at 7:34

NoobEditor

16k20 gold badges85 silver badges117 bronze badges

1 Comment

NoobEditor Over a year ago

@SurjithSM : yup...just link was not working..thanks for headsup!! :)

wbinky · Accepted Answer · 2014-01-06 07:35:27Z

0

Add a style like this to your paragraph:

.word_wrap {word-wrap:break-word;}

answered Jan 6, 2014 at 7:35

wbinky

1601 silver badge11 bronze badges

Comments

Manoj · Accepted Answer · 2014-01-06 07:37:04Z

0

Try this code:

FIDDLE

CSS:

table {
    table-layout: fixed;
    width: 100%;
}

td {
    word-wrap: break-word;
}

answered Jan 6, 2014 at 7:37

Manoj

1,8881 gold badge13 silver badges25 bronze badges

4 Comments

Surjith S M Over a year ago

This answer is already there dude. Try upvoting instead of creating new

Surjith S M Over a year ago

@NoobEditor I do, but sometimes, may be happen in sametime

Surjith S M Over a year ago

@NoobEditor I didn't post an answer to this because I saw your post just before submitting.

Manoj Over a year ago

I didn't see the previous post , before i was submitting.sorry it won't happen in future..

Ram kumar · Accepted Answer · 2014-01-06 07:47:36Z

0

Please add on css div table tr td{word-break: break-all;}

answered Jan 6, 2014 at 7:47

Ram kumar

3,1586 gold badges36 silver badges52 bronze badges

Collectives™ on Stack Overflow

text overflow in td html

5 Answers 5

Comments

1 Comment

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related