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

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;

你的td标记

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