0

When I have an element with word-wrap: break-word; style directly on my page everything works as I wish:

<html><head/><body>
    <div style="word-wrap: break-word;">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
</body></html>

When I have the element inside a table it doesn't wrap its content anymore, but stretches out its width without a boundary:

<html><head/><body>
    <table><tr><td>
        <div style="word-wrap: break-word;">
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </div>
    </td></tr></table>
</body></html>

My questions are:

  1. Why does the element not wrap its contents anymore?
  2. How can I make the element wrap its content when its inside a table the same way it does in the first example?
David
  • 1,672
  • 2
  • 13
  • 32
  • 1
    divs by default are 100% width of it's parent, once it goes into a td - tds by default grow to allow the content inside to fit (unless you have table layout fixed). To make the div in the td wrap, give the table width 100% and table layout fixed https://jsfiddle.net/ehq2jxw4/ – Pete Feb 04 '21 at 15:10
  • Exactly what I needed, thanks! – David Feb 04 '21 at 15:29

0 Answers0