tag里面的字数不同。导致一行显示不完就掉下去了半边

Question

tag里面的字数不同。
导致一行显示不完就掉下去了半边。
怎样去判断才能让它太长了就自动一起在下一行显示？
而不是拆分成2半呢？】
太丑了
如图：黄色背景部分就是tag标签：

代码：

<div class="issue-tags">  
 <router-link v-for="item in tags"  
 :key="item.topicId"  
 :to="{path:'/topicdetail',query:{topicId: item.topicId}}"  
 >  
 <span>{{ item.topicName }}</span>  
 </router-link></div>

css：

.issue-tags {  
  padding-bottom: 25px;  
  
 span {  
    margin-right: 15px;  
 padding: 6px 12px;  
 font-size: $small-font;  
 background: $theme-color;  
 color: #fff;  
 border-radius: 70px;  
 }  
}

Answer 1

1. 元素块状化->display: inline-block;[只要能块状化的都行->最好是用flex布局]
2. 文本不断行->word-break: keep-all;

Answer 2

果然。加了个内联块状就行了：