Блог

У меня есть список тегов. Я визуализирую каждый тег в одном диапазоне. Я назначил класс промежутку как «тег». Теперь я отображаю этот список тегов в одном из столбцов таблицы. Список этих тегов выходит за пределы таблицы. Я использовал этот CSS-код.

 export class CustomTagsCell extends React.Component {
  render() {
    return (
      <>
        {this.props.tags amp;amp;
          this.props.tags.map((tag, i) => {
            return (
              <span className="tag" key={i}>
                {tag}
              </span>
            );
          })}
      </>
    );
  }
} 

это мой код компонента.
теперь CSS для этого кода является

 span.tag {
    display: block;
    background-color: #3d3d3d;
    padding: 1px 8px;
    line-height: 23px;
    margin-left: 0px;
    margin-right: 8px;
    word-break: keep-all;
  } 

Если я использую word-break: break-all или word-break:break-word, то мои теги сломались.

Я хочу, чтобы, если мой список тегов выйдет за рамки td, оставшиеся теги должны появиться в следующей строке. Вся бирка должна быть целой, а не сломанной.