如何使锚标签字内的文本被空格包裹？

Question

I have applied the following CSS to a table:

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

the table html is something like this:

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

and this wraps up the content of all cells by word, ie. the text goes to new line on white space. But for some reason it doesn't apply to a anchor tag inside the td and the word in the link gets broken to reach new line.But, I need to show each individual word in the link text in new line. I am pretty new to css and html, and in my project I am using bootstrap and angular js. Why is this happening and what is the work-around for this?

EDIT 1: it seems the formatting is applied on the a tag as well, unlike what I thought at first, but the problem is it contains text with '-' and the new line is applied on the '-' instead of the white space, how do I make the new line to work only when white space is encountered?

Answer 1

found the solution, it seems the word wrap by default breaks line by hyphen,so replacing the hyphen with a non-breaking hyphen solved the problem for me.

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

reference- https://stackoverflow.com/a/43619683/11259999