1

A long string of characters contained in a td tag and that string will continue on one line and won't make a line break and I have to scroll towards the right to see the y's on the right side.

How do I make it so that the line containing x will make a line break after filling up 50% of the window so I can see all the x's and y's without scrolling?

 <html>
<style>
    .table
        {
            border-width:   1px;
            border-style:   solid;
            border-color:   black;
            text-align:     center;
            width:          100%;
            overflow-wrap:  break-word;
            word-wrap:      break-word;
        }
</style>
<body>
    <table border= '1'class = 'table'>
        <tr>
            <td class = 'left'>Left</td>
            <td class = 'right'>Right</td>
        </tr>
        <tr>
            <td>
                xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            </td>
            <td>
                yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
            </td>
        </tr>
    </table>
</body>

schoolwithschool
  • 11
  • 4

2 Answers2

1

Use the CSS property:

word-wrap: break-word;

You can add it as a style attribute inside your TD tag, or create a CSS rule for TD in your stylesheet.

DanyAlejandro
  • 1,440
  • 13
  • 24
0

All you have to do is add word-break: break-all; to your <td> tags.

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79