javascript - 使用函数动态生成标签

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属性(property)。但这不是理想的方法，即使它有效。