如何使锚标记内的文本按 space 换行？

Question

我已将以下 CSS 应用于 table :

td {
    overflow: hidden;
    white-space: pre-wrap;
    text-overflow: ellipsis;
}

table html 是这样的：

<tbody>
  <tr ng-repeat="a in vm.listOfA" id="{{ request._links.self.href }}" ng-click="vm.setSelected(request)" ng-class="{ warning: (vm.selectedRequest !== null  && vm.selectedRequest._links.self.href === request._links.self.href) }">
    <td ng-repeat="column in vm.availableColumns" ng-if="vm.selectedColumns.indexOf(column.name)!=-1">
      <span ng-show="!column.isAnchor">{{ request[column.name] }} </span>
      <a ng-show="column.isAnchor" ng-href="{{ vm.jumpTo(request._links.myLink.href) }}">{{ request[column.name] }} </a>
    </td>
</tbody>

这将所有单元格的内容按单词包装起来，即。文本转到白色的新行 space。但由于某种原因，它不适用于 td 内的锚标记，并且 link 中的单词被破坏以达到新的 line.But，我需要显示 [=30= 中的每个单词] 文本换行。我是 css 和 html 的新手，在我的项目中我使用的是 bootstrap 和 angular js。为什么会发生这种情况，解决方法是什么？

编辑 1： 格式似乎也应用于 a 标签，这与我最初的想法不同，但问题是它包含带有“-”和新行应用于 '-' 而不是白色 space，如何使新行仅在遇到白色 space 时起作用？

Answer 1

找到了解决方案，似乎自动换行默认用连字符换行，所以用不间断的连字符替换连字符解决了我的问题。

request[i].anchorText = request[i].anchorText.replace(/-/g, '‑');

参考-

如何使锚标记内的文本按 space 换行？

How to make text inside anchor tag word wrapped ,by space?

html

css

angular-ui-bootstrap