使用函数动态生成标记

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>。如果有必要使用span，请尝试应用display: block属性。但这并不是理想的做法，即使它是有效的。