如何避免span元素在窗口缩小时被截断或自动换行？

问题原因 #

你遇到的span截断换行问题核心来自两点：一是行内元素默认允许内部文本折行，二是外层写死的width:20px远小于内容实际所需宽度，导致内容被强制挤压换行。

可行解决方案 #

• 给span元素添加white-space: nowrap;样式，强制内部文本不折行，避免文字被截断拆分
• 将span的display属性设置为inline-block，让标签的内边距、圆角等样式可以正常生效，不会出现布局错位
• 若需要保留窄容器配置，可给外层td或row容器添加overflow-x: auto;样式，允许内容横向滚动，不会被挤压换行；如果不需要强制窄容器，移除写死的极小width配置即可
• 调整Bootstrap栅格写法：Bootstrap 4中xs断点的栅格类已经简化为col-6，可替换原有的col-xs-6，同时可根据场景移除mr-1、ml-1等额外边距，减少不必要的宽度占用

修改后参考代码 #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<table>
  <tr>
    <td id="1">
      <div class='row'>          
        <div class='col-6 mb-3'>
          <span title='Passed' class='bg-success rounded text-light font-weight-bold h6 p-2' style="white-space: nowrap;display: inline-block;">
              54 passed
          </span>
        </div>
        <div class='col-6 mb-3'>
          <span title='failed' class='bg-danger rounded text-light font-weight-bold h6 p-2' style="white-space: nowrap;display: inline-block;">
              54 failed
          </span>
        </div>
        <div class='col-6 mb-3'>
          <span title='error' class='bg-warning rounded text-light font-weight-bold h6 p-2' style="white-space: nowrap;display: inline-block;">
              54 error
          </span>
        </div>
        <div class='col-6 mb-3'>
          <span title='notRun' class='bg-primary rounded text-light font-weight-bold h6 p-2' style="white-space: nowrap;display: inline-block;">
              54 not run
          </span>
        </div>
      </div>
    </td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup