如何仅在内容换行时将元素宽度设为min-content？

我当前使用的CSS样式如下：

.tag {
  /* width: min-content; */
    display: inline-flex;
    border: 1px solid rgba(136, 136, 136, 0.45);
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 90%;
    margin: 0px 6px 3px 0px;
    cursor: pointer;
}

遇到的问题 #

• 第一张图中，第一个标签块存在多余的前置空白，需要去除该空白。
  
• 当开启注释的width: min-content属性后，原本可以单行显示的最后一个标签块发生了换行，希望避免这种情况。
  

解决方案 #

1. 去除前置空白 #

这个空白一般是内联元素之间的换行/空格导致的，可通过以下方式解决：

• 给标签的父元素设置font-size: 0;，同时给.tag重置font-size: 90%;，消除内联元素间的空白间隙；
• 或者将.tag的display属性从inline-flex改为inline-block，同时检查HTML结构，去掉标签之间多余的空格或换行。

2. 避免开启宽度属性后换行 #

width: min-content会强制元素收缩到内容最小宽度，容易导致容器剩余空间不足。可以替换为width: fit-content，它会自适应内容宽度，同时尽可能利用容器空间，减少不必要的换行。修改后的CSS：

.tag {
  width: fit-content;
  display: inline-flex;
  border: 1px solid rgba(136, 136, 136, 0.45);
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 90%;
  margin: 0px 6px 3px 0px;
  cursor: pointer;
}

如果仍有换行问题，可检查父容器宽度是否足够，或微调.tag的margin值缩小标签间距，确保所有标签能在一行容纳。

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