白色空间无法正常工作

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 example