CSS双Flexbox溢出处理：单行显示项目名称、分类与项目数量的适配方案求助

Got it, you're trying to build that single-line layout where both the item name and the category suffix can overflow, and you want to avoid JavaScript entirely since your project is on WebAssembly. That dual-flex overflow scenario is definitely tricky, but we can nail it with pure CSS by tweaking the flex properties and fixing a common min-width issue.

Here's the revised solution that handles all your overflow cases:

Updated CSS #

.search_list {
  padding: 5px;
  display: flex;
  width: 400px;
  border: solid 1px black;
  white-space: nowrap; /* Force everything to stay on one line */
}

.search_value {
  flex: 1 1 auto; /* Let it grow/shrink with available space */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* Critical: Allow it to shrink below content width */
  margin-right: 8px; /* Optional spacing between item and category */
}

.search_info {
  display: flex;
  flex: 0 1 auto; /* Don't grow, only shrink if needed */
  min-width: 0; /* Critical: Let the category container shrink */
}

.search_info .flex {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto; /* Take remaining space in the category container */
  min-width: 0; /* Critical: Let this part shrink too */
}

.search_info .no_flex {
  flex: 0 0 auto; /* Fixed width, never shrink/grow */
  margin-left: 4px; /* Optional spacing between category text and count */
}

Your Existing HTML (No Changes Needed) #

<div class="search_list" >
 <div class="search_value">Short values</div>
 <div class="search_info">
 <div class="flex">(Category</div>
 <div class="no_flex">, 1)</div>
 </div>
</div>
<div class="search_list" >
 <div class="search_value">Item value with a long long text that overlow</div>
 <div class="search_info">
 <div class="flex">(Category</div>
 <div class="no_flex">, 1)</div>
 </div>
</div>
<div class="search_list" >
 <div class="search_value">Long category</div>
 <div class="search_info">
 <div class="flex">(The category will overflow for sure in this case</div>
 <div class="no_flex">, 1)</div>
 </div>
</div>
<div class="search_list" >
 <div class="search_value">Long category and text that will both overflow</div>
 <div class="search_info">
 <div class="flex">(The category is very</div>
 <div class="no_flex">, 1)</div>
 </div>
</div>

Key Fixes Explained #

• min-width: 0 everywhere: By default, flex items have min-width: auto, which means they won't shrink smaller than their content. Adding min-width: 0 lets both the item name and category container shrink as needed to fit the parent.
• Flex property tuning:
  • .search_value uses flex: 1 1 auto to prioritize taking available space, but still shrink when the category needs room.
  • .search_info uses flex: 0 1 auto to avoid pushing the item name out, but will shrink if the item name is extremely long.
  • The .flex category text takes all remaining space in its container and truncates when overflowed, while .no_flex stays fixed.

This setup handles all four of your test cases perfectly:

1. Short item + short category: Displays fully
2. Long item + short category: Item text truncates
3. Short item + long category: Category text truncates
4. Long item + long category: Both item and category text truncate, with the , 1) always visible

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