以固定宽度在表格中显示文本

Question

我有一个希望以表格格式显示的用户列表。 我的问题是我只有30px的可用宽度，因此我需要将跨度超过此范围的所有名称断开到新行上。

HTML

<table>
       <tr>
          <td>User ID</td>
          <td style="width:40px;">User's Full Name</td>
       </tr>
       @foreach(var user in @Model)
       {
          <tr>
             <td>@user.Id</td>
             <td style="width:40px;">@user.Name</td>
          </tr>
       }
</table>

CSS

table{
    width:40px;
    background-color: red;
}

任何更长的名称只会迫使宽度增加。

Answer 1

使用这个属性

word-wrap:break-word;

您的dd的标记

<td style="width:40px;word-wrap:break-word;">@user.Name</td>