How to make td overflow go into multiple lines?

Question

I need to make the td overflow go into multiple lines as textarea.

HTML

<table class="table">
  <tr>
    <td>Jill</td>
    <td style="max-width:200px;overflow-y:scroll;">Smithasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Fiddle here

put <br/> tag for next line.

Anil Panwar
– Anil Panwar

2016-01-14 11:23:58 +00:00
Commented Jan 14, 2016 at 11:23 — Anil Panwar
– Anil Panwar, Commented Jan 14, 2016 at 11:23

Saqib Amin · Accepted Answer · 2016-01-14 11:19:23Z

1

Wrapping of text works when whitespaces are found in the text, the text you have written in the td above doesn't have any whitespaces, please add whitespaces and then it will start flowing on multiple lines.

answered Jan 14, 2016 at 11:19

Saqib Amin

1,1717 silver badges16 bronze badges

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

8 Comments

Raviteja Over a year ago

how to hide the bottom scroll ?

Saqib Amin Over a year ago

@Raviteja You can add overflow-x: hidden; for that. Please check the updated fiddle here: jsfiddle.net/huewy6r8/2

Raviteja Over a year ago

height is increasing if the text overflows here scroll should appear

Saqib Amin Over a year ago

isn't that what you require for your td? To flow text on multiple lines like textarea

Raviteja Over a year ago

for textarea a vertical scroll appears right ? If the text overflows

|

S M · Accepted Answer · 2016-01-14 11:23:16Z

0

That is due to your text. There is no whitspace in your text. just add some white space in your text You can check the fiddler here

    <table class="table">
      <tr>
        <td>Jill</td>
        <td style="max-width:200px;overflow-y:scroll;">
        Smithasdfas
        dfasdfasdfasdfa sdfasdfasdfasdfasdfasdfasdfasdfasd 
asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf 
</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
    </table>

answered Jan 14, 2016 at 11:23

S M

3,2536 gold badges35 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to make td overflow go into multiple lines?

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related