如何使锚标记内的文本按空格自动换行?

我已将以下 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。为什么会发生这种情况?解决方法是什么?


编辑 1: 似乎格式也应用于 a 标记,与我一开始的想法不同,但问题是它包含带有 '- 的文本'新行应用于“-”上而不是空格,如何使新行仅在遇到空格时才起作用?


慕桂英546537
浏览 45回答 1
1回答

莫回无

找到了解决方案,似乎默认情况下自动换行会用连字符换行,因此用不间断连字符替换连字符解决了我的问题。request[i].anchorText = request[i].anchorText.replace(/-/g, '‑');
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5