如何让<li>内元素自适应单行/多行显示？Flexbox实现方案求教

原始HTML结构 #

<ul>
  <li>
    <span>swans:</span> none
  </li>
  <li>
    <span>ducks:</span> none
  </li>
  <li>
    <span>geese:</span> lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit
  </li>
</ul>

需求说明 #

当<li>内的内容能完全容纳在一行时，<span>与后续文本同行显示；当内容超出一行宽度时，<span>独占一行，后续文本换行展示。

Flexbox实现方案 #

通过Flexbox的换行特性结合最小宽度限制，就能实现这个自适应效果：

li {
  /* 启用Flex布局，允许内部元素换行 */
  display: flex;
  flex-wrap: wrap;
  /* 调整垂直对齐方式，避免文本错位 */
  align-items: flex-start;
  /* 给列表项添加间距，区分不同条目 */
  margin-bottom: 1em;
}

li span {
  /* 确保span不会被压缩，始终保留自身内容宽度 */
  min-width: max-content;
  /* span与后续文本的间距，优化同行时的排版 */
  margin-right: 0.3em;
}

效果说明 #

• 内容较短的列表项（如swans、ducks）：<span>和后续文本在同一行显示，呈现为 swans: none
• 内容较长的列表项（如geese）：当一行无法容纳全部内容时，<span>独占一行，后续文本自动换行到下方：

  geese:
  lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit
  

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