如何避免破坏超链接但很好地将它们包装在容器中？答案

【问题标题】：How to avoid breaking hyperlinks but nicely wrap them within the container?如何避免破坏超链接但很好地将它们包装在容器中？
【发布时间】：2017-02-06 01:24:32
【问题描述】：

今天，在玩新的角度时，我遇到了附加问题：

“标签”在整个父容器（白色 div）中扩展。如您所见，它们会包裹起来，但很糟糕。

我希望他们不要在单词中间打断，但在这种情况下，“软件工程”应该完全在第二行。

标签在div中封装如下：

<div class="menu-block">
  <div class="menu-header">
    <strong>&raquo; Tags</strong>
  </div>
  <div class="menu-content tags">
    <tags></tags>
  </div>
</div>

以及相应的 CSS 类：

.menu-block {
    border-bottom: 1px solid #eeeeee;
    padding: 1.2em;
    border-left: 1px solid #eeeeee;
    background-color: #fcfcfc;
}

.menu-block .menu-header {
    margin-bottom: 1em;
    font-size: 14pt;
}

.menu-block .menu-content {
    font-size: 11pt;
    /* See the specifications below */
}

.menu-block .tags {
    font-size: 11pt;
    line-height: 2.2em;
}

.menu-block 元素也封装在 bootstrap .col-4 中。

最后一件事：角度组件（我认为这里的注释就足够了）：

@Component({
    selector: 'tags',
    template: `
    <a *ngFor="let tagFeed of tagFeeds" class="tag" href="/tag/{{tagFeed.id}}">{{tagFeed.id}}</a>
    `,
})

【问题讨论】：

标签： html css angular

【解决方案1】：

改变css

.tag {
  display: inline-block;
  white-space: nowrap;
  word-wrap: break-word;
}

在线演示http://codepen.io/tieppt/pen/WRyMVZ

【讨论】：

有效！ :) 谢谢