如何实现td中wicket:message与数量span元素同步换行？

嘿，这个问题其实是浏览器默认的文本换行规则在搞怪——当容器宽度不足时，浏览器会在空白字符（比如空格）处拆分内容，所以才会出现只有数字“8”单独换行的情况。咱们只需要把「Qty」和数量元素绑定成一个不可拆分的整体，就能让它们一起换行啦，给你两种简单可行的办法：

方法1：用容器包裹+CSS禁止换行（推荐，语义化更好） #

首先修改你的HTML结构，把wicket:message和数量span放到同一个容器里：

<td wicket:id="testing" class="label">
  <strong><span wicket:id="dosage">Crocin 650 90MG, </span></strong>
  <!-- 新增容器包裹Qty和数量元素 -->
  <span class="qty-wrapper">
    <wicket:message key="Qty" />
    <span wicket:id="quantity">8</span>
  </span>
</td>

然后给这个容器添加CSS样式，禁止内部内容换行：

.qty-wrapper {
  white-space: nowrap;
}

这样qty-wrapper里的内容会被视为一个整体，要么和前面的药品名称在同一行，要么一起换行到下一行，完美符合你的期望。

方法2：用非换行空格替代普通空格（快速临时方案） #

如果不想修改HTML结构，也可以直接把wicket:message和数量span之间的普通空格换成非换行空格（ ）：

<td wicket:id="testing" class="label">
  <strong><span wicket:id="dosage">Crocin 650 90MG, </span></strong>
  <wicket:message key="Qty" />&nbsp;<span wicket:id="quantity">8</span>
</td>

非换行空格不会被浏览器当作换行点，所以「Qty」和数字会一直保持在同一行，不过这种方法语义化稍弱，更适合临时快速修复。

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