html - 如何避免破坏超链接而将它们很好地包装在容器中？

今天，在玩新的角度游戏时，我遇到了以下问题：



“标签”扩展到整个父容器（白色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元素也封装在引导程序.col-4中。

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

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

最佳答案

CSS的变化

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

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

关于html - 如何避免破坏超链接而将它们很好地包装在容器中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42054904/