javascript - 字符串被包裹在跨度中

我有一个用户列表。我要显示在表格中。现在，在角色列中有每个用户的角色列表。但是，即使在行结束之前，

我的用户列表是

$scope.userList = [{
    "id": 1,
    "name":"ABC",
    roles:["Task Manager","Monitoring" ,"Client Admin","User Admin","Employees","Manager","Production","planner"]
  }, {
   "id": 1,
    "name": "ABC",
    roles:["Task Manager","Monitoring","Planner","Employees","Production","Analysis","Incident"]
  }, {
   "id": 1,
    "name": "ABC"
  }, {
    "id": 1,
    "name":" ABC"
  }];

我将其显示为

<tr ng-repeat="user in userList" >
                                    <td >
                                        <span id="userId{{$index + 1}}" ng-bind="user.id"></span>
                                    </td>
                                    <td >
                                        <span id="userFirstName{{$index + 1}}" ng-bind="user.name"></span>
                                    </td>

                                    <td ><span  ng-repeat="rol in user.roles track by $index"><span ng-if="$index > 0">,&nbsp;</span>{{rol}}</span>
                    </td>
                  </tr>

“角色”列值不在一行中显示。我需要的是在跨度结束时进行包装。

这是该问题的一个例子
http://plnkr.co/edit/EUZokOfBWutp92MGFGsm?p=preview

在第二行角色列中可以看到的位置，任务管理器将显示在单独的行中。

最佳答案

为“ td span”添加一些样式：

td span {
white-space: nowrap;
display: inline-block;
}

并添加：

table {
width:100%;
}