html - 超过宽度时将文本包装在 div 中

Question

我有一个表，其中有 3 列。第一列在其下方有名称和报告（即如小提琴 ACT TSK REM 等）链接。第二列和第三列有一些文本要显示。

我已经为“EmployeeReportsLinks”类设置了div的宽度，并试图包装文本，但它不起作用“NAW”中的“W”在第二行。

请建议我为此提供全球解决方案。

这是我的html

<table>
<tr>
    <td id="tdfirst" valign="top" style="min-width: 250px; width: auto; text-align: left; padding-left: 5px; padding-top: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(248, 248, 248); height: 68px;">Hello TD1
        <div class="EmployeeReportsLinks" style="width: 200px;display: block; word-wrap: break-word;">ACT&nbsp;TSK&nbsp;REM&nbsp;SAL&nbsp;AFE&nbsp;NAW&nbsp;AW&nbsp;IG&nbsp;CPP&nbsp;COG&nbsp;LS&nbsp;PRE&nbsp;
        </div>
    </td>
    <td class="tdsecond" valign="top" style="min-width:485px;text-align:left;padding-left:5px;padding-top:5px;border-bottom:1px solid #F8F8F8;">Hello TD2</td>
    <td align="right" valign="top" style="min-width:270px;padding-right:5px;padding-top:5px;border-bottom:1px solid #F8F8F8;">Hello TD3</td>
</tr>

你可以在这里找到工作示例JS Fiddle

Answer 1

你的话是包装，因为你有风格：word-wrap: break-word;在你的.EmployeeReportsLinks

您可以删除该样式和您输入的所有不间断空格 (  ) 或添加类似

.EmployeeReportsLinks > * {white-space:nowrap;}

但这种否定的需要word-wrap: break-word;

http://jsfiddle.net/2eRT9/5/（第二种选择）