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

我试图使一个组件，其中有一个横向链接列表。如果链接中的单词太长，我希望整个单词移到下一行，而不是单词的一部分

下面是我到目前为止所做的组件的图像。链接在父元素的中间断开或有时断开

正如你所看到的，“思想和灵魂”这个词正在中途被打破，而“必须去的地方”则超出了父母的范围

SCSS/

HTML

子类别
使用
显示：内联块
对于元素，也可以将所有子元素放在具有

display:flex; 
flex-wrap:wrap;

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

display:flex; 
flex-wrap:wrap;