如何用dangerouslySetInnerHTML实现行内文本？TailwindCSS布局问题

给第二个span加上flex-1类就能解决问题，修改后的代码如下：

<li className='flex flex-wrap'>
     <span className='font-semibold'>Eléments complémentaires :</span>
     <span className='flex-1 break-words'
           dangerouslySetInnerHTML={{
              __html:"My test HTML without any tags that is very long and should wrap within the same line starting after the colon",
           }}
      />
</li>

为什么这样有用 #

原来的写法里，两个span都是默认的flex项目，flex-grow值为0，意味着它们只会占用自身内容需要的宽度。当第二个span内容过长时，flex-wrap会把整个span推到下一行。加上flex-1后，第二个span会自动填充容器的剩余宽度，内容会在span内部换行，而不是整个span换行，这样就保持了标签和内容的开头始终在同一行，长内容也会顺着标签的位置继续换行展示。

如果需要强制内容不换行，可以把break-words替换成whitespace-nowrap，但这可能导致内容溢出容器，按需选择即可。

内容的提问来源于stack exchange，提问作者Johan