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

今天,在玩新角度的时候我遇到了附带的问题:

enter image description here

“标签”正在整个父容器(白色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>
    `,
})

回答(1)

2 years ago

改变css

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

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