• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 188
  • Last Modified:

HTML table question

Hi all,

If a have a table like so:

|COLUMN1|COLUMN2|COLUMN3|COLUMN4|

If say column1 has a value which contains a large amount of text is there a way to wrap the text to a new line every say 50 chars?

So the column's always remains the same width regardless of the amount text within them.

Thanks
0
CtrlCtrlV
Asked:
CtrlCtrlV
  • 6
  • 3
1 Solution
 
hongjunCommented:
Use this

<td style="word-wrap:break-word;">
0
 
hongjunCommented:
You fix the width yourself. This is not by number of characters but is by width
0
 
hongjunCommented:
E.g.

<table border="1">
<tr>
    <td style="word-wrap:break-word;width:100px">
        Column1Column1Column1Column1Column1Column1Column1Column1Column1Column1Column1Column1
    </td>
    <td>
        Column2
    </td>
    <td>
        Column3
    </td>
    <td>
        Column4
    </td>
</tr>
</table>
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
CtrlCtrlVAuthor Commented:

Thats brilliant, thanks a million.

Could you explain to me what <td style="word-wrap:break-word;width:100px"> acually does?

Thanks
0
 
hongjunCommented:
>> word-wrap:break-word;

Does exactly what you wanted

>> width:100px

This specifies the width of the column in pixels.
You can change this value to your liking.


hongjun
0
 
CtrlCtrlVAuthor Commented:

ok, thanks, just one more thing, is it possible to apply
<td style="word-wrap:break-word;width:100px">
to the whole table instead of having to put it in every <td> tag?

thanks again
0
 
hongjunCommented:
Can.


<style>
td {
      word-wrap:break-word;
      width:100px;
}
</style>

<table border="1">
<tr>
    <td>
        Column1Column1Column1Column1Column1Column1Column1Column1Column1Column1Column1Column1
    </td>
    <td>
        Column2
    </td>
    <td>
        Column3
    </td>
    <td>
        Column4
    </td>
</tr>
</table>



hongjun
0
 
CtrlCtrlVAuthor Commented:

thank you ;-)
0
 
hongjunCommented:
Welcome
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now