如何仅当view-count span内部需换行时让其另起一行显示？

要实现你需要的效果，只需对现有CSS做两处关键调整，就能同时满足「.view-count内部文本不拆分换行」和「空间不足时整个.view-count另起一行」的需求：

推荐方案（弹性布局，适配性更强） #

修改后的完整CSS代码：

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

table {
  width: 100%;
}

td {
  width: 25%;
  /* 启用弹性布局，让内部元素灵活排列 */
  display: flex;
  /* 允许元素在空间不足时换行 */
  flex-wrap: wrap;
  /* 给两个span之间添加间距，可选 */
  gap: 6px;
  /* 垂直居中对齐元素，可选 */
  align-items: center;
}

.title {
  /* 让标题尽可能占据可用空间，自动挤压视图计数到合适位置 */
  flex-grow: 1;
}

.view-count {
  color: white;
  background-color: rgb(150, 150, 150);
  padding: 0 3px;
  border-radius: 4px;
  /* 强制内部文本保持为一个整体，不拆分换行 */
  white-space: nowrap;
}

效果说明 #

• 单元格宽度足够时，.title和.view-count在同一行显示，.view-count内部文本始终完整
• 单元格宽度不足时，.view-count自动换行到单独一行，且自身内部不会出现换行拆分

替代方案（行内块元素，无需弹性布局） #

如果不想使用弹性布局，也可以通过行内块元素实现：

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

table {
  width: 100%;
}

td {
  width: 25%;
}

.title {
  /* 让标题占据大部分空间，预留视图计数的显示位置 */
  display: inline-block;
  max-width: calc(100% - 80px); /* 数值可根据.view-count的实际宽度调整 */
}

.view-count {
  color: white;
  background-color: rgb(150, 150, 150);
  padding: 0 3px;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-block;
}

注：此方案需要手动计算标题的最大宽度，适配性不如弹性布局方案。

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