如何使锚标记词中的文本用空格包裹？

Question

我已将以下CSS应用于表：

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

表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>

这将按单词包装所有单元格的内容，即文本转到空白处的新行。但是由于某种原因，它不适用于td内的锚标签，并且链接中的单词断开以到达新行。但是，我需要在链接文本中以新行显示每个单词。我对CSS和HTML相当陌生，在我的项目中，我正在使用bootstrap和angular js。为什么会发生这种情况？解决方法是什么？

EDIT 1：似乎格式设置也应用到了标签上，这与我最初的想法不同，但问题是它包含带有'-'的文本，而新行则应用在'- '而不是空白，如何使新行仅在遇到空白时才能工作？

Answer 1

找到了解决方案，似乎默认情况下，自动换行将连字符换行，因此用不间断的连字符替换连字符为我解决了这个问题。

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

参考-https://stackoverflow.com/a/43619683/11259999