タグを動的に生成する関数を使用する

Question

動的タグを表示したい。私は、私のCSSが見栄えのために改行を取得するように見えることはできません。コンテナは応答し、それゆえきれいに破ることがあります。

CSS：

.tags { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    background-color: white; 
    padding-left: 0.5em; 
    padding-right: 0.5em; 
    padding-top: 0.25em; 
    padding-bottom: 0.25em; 
    margin: 0.5em; 
} 

がそうのようにそれを表示する：

mapTags = tagArray => { 
    return tagArray.map((item, i) => <span key={i} className={styles.tags}> 
    {item}</span>); 
}; 

ヘルプしてください。

ボーナス：場合によっては、タグにスペースなどが含まれることがあります。 "これはタグです"。ここで私の国境の崩壊を解決するには？

Answer 1

<span>はインライン要素です。 <div>を使用してください。 スパンを使用する必要がある場合は、display: blockプロパティを適用してみてください。しかし、たとえそれが動作しても、それを行うのは理想的な方法ではありません。