空白不起作用

Question

我用下面的CSS创建了一个div：

.inner-overlay {
    width: 500px;
    min-height: 200px;
    height: 150px;
    background: white;
    position: absolute;
    margin: auto;
    z-index: 1301;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 3px solid rgba(56, 93, 138, 1.0);
    display: none;
}

并div包含带有 css 的表单：

.reportTable {
    width: 460px;
    margin: auto;
}
.reportTable tr td:nth-child(1) {
   width: 20px;
}
.reportTable tr td:nth-child(2) {
   width: 400px;
   white-space: normal;
}

对于div和form：

<div class="inner-overlay" style="display: block;">
    <form class="reportForm">
    <table class="reportTable">
    <tbody>
        <tr>
        <td colspan="2">Please Choose A Reason From Below:</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="1"></td>
        <td>There is/are course work content or answer.</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="2"></td>
        <td>The content is not related to academic.</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="3"></td>
        <td>There is/are suspicious file uploaded.</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="4"></td>
        <td>asdasdasdasd</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="5"></td>
                    <td>asdasfasfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td>
        </tr>
        <tr>
        <td>&nbsp;</td>
        <td><span id="submitReport" onclick="javascript: submitReport(&quot;notes&quot;, &quot;29&quot;)">Submit</span> <span id="cancelReport" onclick="javascript: $(&quot;.overlay&quot;).hide(); $(&quot;.inner-overlay&quot;).hide();">Cancel</span></td>
        </tr>
    </tbody></table>
    </form>
</div>

下图是我的桌子的设计。但它white-space没有按应有的方式工作。

有什么我错过的吗？

编辑 ：

1. 添加了 HTML 代码。

2. 已上传至jsfiddle。

Answer 1

如果您将word-break:break-all;规则添加到单元格中，它应该可以工作：

.reportTable tr td:nth-child(2) {
    width: 400px;
    white-space: normal;
    word-break:break-all;
}

jsFiddle 示例