Как сделать так, чтобы текст внутри тега якоря переносился через пробел?

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>

, и это оборачивает содержимое все клетки по слову ie. текст переходит на новую строку на пустом месте. Но по какой-то причине это не относится к тегу привязки внутри тд, и слово в ссылке прерывается, чтобы добраться до новой строки. Но мне нужно показать каждое отдельное слово в тексте ссылки в новой строке. Я довольно новичок в css и html, и в своем проекте я использую bootstrap и angular js. Почему это происходит и какой обходной путь для этого?

EDIT 1: кажется, что форматирование также применяется к тегу, в отличие от того, что я сначала думал, но проблема в том, что он содержит текст с «-» и новая строка применяется к «-» вместо пробела, как мне заставить новую строку работать только при наличии пробела?

Answer 1

нашел решение, кажется, слово wrap по умолчанию разбивает строку на дефис, поэтому замена дефиса на неразрывный дефис решила проблему для меня.

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

ссылка- { ссылка }