html - 如果大小大于父级，则动态转移到下一行

Question

我正在尝试制作一个具有水平链接列表的组件。如果链接中的单词太长，我希望整个单词移动到下一行而不是部分单词。

下面是我到目前为止完成的组件的图像。链接在中途中断或有时超出父元素。

正如您所看到的，“Mind and Soul”一词在中途中断，而“Must Go Places”超出了父级的范围。

SCSS/

.sidebar-widget {
  position: relative;
  z-index: 1;
  background-color: #eff4f9;
  padding: 60px 25px;
  margin-bottom: 40px;

  h3 {
    font-size: 30px;
    margin-bottom: 30px;
    font-weight: 400;
    color: $primary-color;

    @media #{$breakpoint-xs} {
      font-size: 24px;
    }
  }

  .sub-category-item {
    border: 2px solid black;
    border-radius: 5px;

    a {
      font-weight: 700;
      color: $secondary-color;
      padding: 2px;
    }
    margin-right: 20px;
  }

}

HTML

<div className="sidebar-widget">
    <h3>Sub Categories</h3>
    <span className="sub-category-item">
        <a href="#"> Random words </a>
     </span
<div>

Answer 1

使用 显示:内联 block 对于该元素，或者您可以将所有子元素放入一个容器中，并使用

display:flex; 
flex-wrap:wrap;