why does word wrap: break word break my table?

Issue

i have attached a image of the issue

My code is supposed to create a table using data from a object. that all works fine. however the issue is that if one of the tables elements is too long and has no spaces then it goes passed the tables border. i tried to fix this by adding "style="word-wrap: break-word"" to the table elements that would include the address since that'll be the longest string. however this broke the table and it no longer appears anymore. I've tried to remove all the code that isn't necessary for simplicities sake.

this code works perfectly without the style tag so i know that must be something to do with the problem.

#tableside{
width: 100%
}

table{
margin-left: auto;
margin-right: auto;
table-layout: fixed;
width: 100%;
}

table, td, tr, th {
  border: 1px solid black;
}

th, tr {
  padding: 5px;
}

    <div id="tableside">
     
      <div id="table">
        <table id="table1">

        </table>
      </div>

    </div>

    var row = "<tr><th>First name</th><th>Last name</th><th>Number</th><th>Address</th></tr>"
    $("#table1").append(row)
    var contactListOriginall = addressLogLength()
    for (let i = 0; i < contactListOriginall.length; i++) {
      let contactName = contactListOriginall[i]
      var firstname = getData(contactName)[0];
      var lastname = getData(contactName)[1]
      var number = getData(contactName)[2]
      var address = getData(contactName)[3]
      let row = "<tr id=contactName><td>" + firstname + "</td><td>" + lastname + "</td><td>" + number + "</td><td style="word-wrap: break-word">" + address + "</td></tr>"
      $("#table1").append(row)
    }

    function reload() {
      $("#table1 tr").remove()
      let row = "<tr><th>First name</th><th>Last name</th><th>Number</th><th>Address</th></tr>"
      $("#table1").append(row)
      var $search = $("#searching");
      var search = $search.val();
      let contactList = match(search)
      for (let c = 0; c < contactList.length; c++) {
        let contactName = contactList[c]
        var firstname = getData(contactName)[0];
        var lastname = getData(contactName)[1]
        var number = getData(contactName)[2]
        var address = getData(contactName)[3]
        let row = "<tr id=contactName><td>" + firstname + "</td><td>" + lastname + "</td><td>" + number + "</td><td style="word-wrap: break-word">" + address + "</td></tr>"
        $("#table1").append(row)
      }
    }
    $("#searching").on("input", function() {
      reload()
    });

  </script>
</body>

Solution

Just to simulate the behaviour of your code, it should be performing something like that:

    <table style="width: 300px;">
        <tr>
            <td style="border: #CCCCCC 1px solid; height: 20px; word-wrap: break-word;">
                test test test test test test test test test test test test test test test test test test test test test test test test test test test
                ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccddddd
            </td>
        </tr>
    </table>

The problem occurs because the browser breaks the entire word to the next line. If you have no spaces, the browser thinks it's a huge word. To break the words in the way you want (in the middle of the word), you need to add the attribute word-break: break-all; Check the snippet below:

    <table style="width: 300px;">
        <tr>
            <td style="border: #CCCCCC 1px solid; height: 20px; word-wrap: break-word; word-break: break-all;">
                test test test test test test test test test test test test test test test test test test test test test test test test test test test
                ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccddddd
            </td>
        </tr>
    </table>

Another possible solution is using divs with scrolls:

    <table style="width: 300px;">
        <tr>
            <td style="border: #CCCCCC 1px solid; height: 20px; word-wrap: break-word;">
                <div style="height: 50px; width: 300px; overflow: auto;">
                    test test test test test test test test test test test test test test test test test test test test test test test test test test test
                    ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccddddd
                </div>
            </td>
        </tr>
    </table>

Hope it helps.

Answered By - Felipe Jacob