跨ng換行換行

Question

我在跨度中使用ng repeat具有價值。我得到像新行這樣的單詞

實際輸出：

我像這樣使用CSS

    border: 1px solid #ECE9E6;
    border-radius: 3px;
    text-align: center;
    font-size: 12px;
    padding: 5px 15px;
    position: relative;
    line-height: 33px;
    margin-right: 3px;
    word-wrap: break-word;

我想要像這樣的輸出：

Answer 1

而不是在span上使用word-wrap 。 我建議您在父div中使用display:inline-block 。

這將確保您完整的內部div移至下一行。

Answer 2

只需如下所示制作HTML

<div id='mainDiv'>
<span class='tag'>abc</span>
<span class='tag'>lmn</span>
<span class='tag'>xyz</span>
<span class='tag'>etc</span>
<span class='tag'>etc</span>
</div>

如下所示添加css。

#mainDiv{
 width: 200px; // any pixel you want to set;
}
.tag{
display:inline-block;
}