为何设置word-wrap: break-word会导致HTML表格无法正常渲染？

我已附上该问题的对应截图。
我的代码逻辑为读取对象数据动态生成HTML表格，基础功能运行正常，但存在显示异常：若某个表格单元格内容过长且不含空格，文本会溢出表格边框。为修复该问题，我尝试给存放地址（通常为最长字符串）的td元素添加style="word-wrap: break-word"样式，添加后表格直接失效无法显示。为简化排查，我已移除所有非必要代码。
不添加该style属性时代码可完美运行，因此判断问题与该样式设置直接相关。

CSS部分 #

#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;
}

HTML与JS部分 #

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

<script>
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>

表格渲染失效和word-wrap样式本身无关，是JS拼接HTML时的引号语法错误导致的：
你用双引号包裹整段HTML字符串，但字符串内部style属性的属性值也使用了双引号，JS解析到style属性后的第一个双引号时，就会判定当前字符串已经结束，后面的word-wrap: break-word会被识别成非法JS语法，直接打断整个脚本执行，后续DOM生成逻辑完全不运行，表格自然无法显示。

以你写的拼接代码为例：

let row = "<tr id=contactName><td>" + firstname + "</td><td>" + lastname + "</td><td>" + number + "</td><td style="word-wrap: break-word">" + address + "</td></tr>"

JS实际解析时会把这行拆成无效片段：<tr...<td style= 是第一段字符串，后面直接跟未定义标识符word-wrap，直接抛出语法错误终止脚本。

任选一种即可解决问题：

• 转义内部双引号：把style属性里的双引号改成\"，标记这是字符串内容而非字符串结束符。建议同时加上word-break: break-all，保证完全无空格的长字符串也能强制在单元格边缘换行，不会溢出边框。注意初始加载逻辑和reload函数里的两处拼接代码都要修改：

  let row = "<tr id=contactName><td>" + firstname + "</td><td>" + lastname + "</td><td>" + number + "</td><td style=\"word-wrap: break-word; word-break: break-all;\">" + address + "</td></tr>"
  

• 外层字符串改用单引号包裹：JS中单、双引号都可以用来定义字符串，外层用单引号包裹HTML片段的话，内部属性用双引号就不会产生冲突：

  let row = '<tr id=contactName><td>' + firstname + '</td><td>' + lastname + '</td><td>' + number + '</td><td style="word-wrap: break-word; word-break: break-all;">' + address + '</td></tr>'
  

• 最推荐的写法：直接把换行规则写到CSS里，完全不用写行内样式，从根源避免引号拼接错误。顺便修正原有CSS的问题：给tr设置padding是无效的，内边距需要加在th和td上：

  #tableside{
  width: 100%
  }
  
  table{
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
  width: 100%;
  }
  
  table, td, tr, th {
    border: 1px solid black;
  }
  
  th, td {
    padding: 5px;
    word-wrap: break-word;
    word-break: break-all;
  }
  

  改完CSS后，把JS拼接代码里所有td上的style="word-wrap: break-word"删掉即可，所有单元格会自动应用换行规则。

内容的提问来源于stack exchange，提问作者ns121