CSS中::before伪元素与文本换行问题求助

你的问题出在.checkout容器的布局约束以及子元素的内部排列规则上，以下是针对性的修复方法：

核心原因 #

.checkout使用flex-direction: column + align-items: center，导致.foods-count、.total-price这类子元素的宽度被限制为内容宽度，在窄屏或特定尺寸下，伪元素和文本容易因宽度不足换行；而你尝试的white-space: nowrap未生效，是因为块级元素内部的换行规则受父容器宽度约束，单纯设置换行规则无法突破宽度限制。

修复代码 #

在现有CSS中添加以下样式：

.checkout .foods-count,
.checkout .total-price {
  display: inline-flex;
  white-space: nowrap;
}

如果希望更稳妥地确保内容不换行，可补充最小宽度设置：

.checkout .foods-count,
.checkout .total-price {
  display: inline-flex;
  white-space: nowrap;
  min-width: max-content;
}

方案说明 #

• inline-flex让子元素保持行内特性，同时内部元素自动在一行排列，完全不会破坏.checkout原有的Flex布局间距
• white-space: nowrap强制内容不换行
• min-width: max-content确保元素宽度足够容纳所有内容，从根源避免因父容器过窄导致的换行

另外，若想从容器层面减少换行概率，可调整.checkout的flex属性，给容器一个最小基准宽度：

.checkout {
  flex: 1 1 220px; /* 替换原有flex:1 3 */
  /* 其余样式保持不变 */
}

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