相关疑难解决方法(0)

我一直在用s和s word-wrap: break-word包装文本.但是,它似乎不适用于表格单元格.我有一个表设置,有一行和两列.列中的文本虽然使用上面的样式,但不会换行.它会使文本超出单元格的边界.这种情况发生在Firefox,谷歌浏览器和Internet Explorer上.divspanwidth:100%word-wrap

以下是源代码:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

上面的长词大于我的页面的边界,但它不会破坏上面的HTML.我已经尝试了以下建议加入text-wrap:suppress和text-wrap:normal,但也有帮助.

我正在使用数据表,我的html表位于父div之内.我最初有这个问题,表在父div之外溢出,如下所示:

我在stackoverflow上找到了这个答案来添加这个css:

#myTable {
    table-layout: fixed;
}

#myTable td {
    text-overflow: ellipsis;
}

这很好地解决了这个问题..在Firefox和Chrome中.所以对于那些浏览器,我现在看到这个:

但是Internet Explorer(我正在使用IE 11)仍然不幸地显示溢出问题,如上面的第一张图片所示.对于其他浏览器,即使我添加其他列,它们仍然会被挤压但仍然适合父div(这就是我想要的),其中IE将保持水平增长

是否有任何关于如何让Internet Explorer确保表保留在父div中并且不会溢出它的建议？

这是我的标题行html,如果这有助于显示我如何限制列大小:

    <table  id="myTable" style="width:100%">
        <thead>
        <tr>
            <th style="width: 22px;">Id</th>
            <th style="max-width: 250px" class="nameColumn">Name</th>
            <th class="descColumn">Description</th>
            <th style="width: 40px;">Status</th>
            <th style="width: 38px;">Start</th>
            <th style="width: 38px;" class="singleLine">End</th>
            <th style="width: 45px;" class="sourceColumn">Source</th>
            <th class="ragColumn">RAG</th>
            <th style="width: 50px;" class="ownerColumn">Owner</th>
            <th class="minorDateColumn singleLine">Prev End</th>
            <th class="minorDateColumn singleLine">Orig End</th>                
            <th style="width: 40px;">Category</th>
            <th style="width: 25px;max-width: 25px">Ref</th>
            <th style="width: 16px;max-width: 16px">Est</th>
            <th class="milestoneCommentsColumn">Comments</th>
            <th …