Bootstrap 4：第一列文本过多时推第二列到下一行并解决溢出

这个问题其实是浏览器默认行为导致的——当文本是无间断的长串（比如你示例里的连续字母组合）时，浏览器不会自动在这些文本中间换行，而col-auto又是根据内容的固有宽度来调整列宽的，所以就出现了文本溢出容器的情况。

要解决这个问题，同时保持你想要的「短文本同行、长文本第二列换行」的效果，有两种简单的方式：

方法一：使用Bootstrap 4内置类 #

Bootstrap 4提供了text-break类，专门用来处理长文本强制换行的场景，它已经帮我们封装了兼容各浏览器的换行样式。只需要给第一列的元素加上这个类即可：

<div class="container">
  <div class="row">
    <!-- 添加text-break类实现长文本换行 -->
    <div class="col-auto bg-success text-break">Lots of text - asdfd adf adf adf akljl;kj adffdaasd kj; jad adsfasdf adsf;kj asdfasdf a sdf adf asdf adf kl;j ;lk j jk;;j ;kl j j;k ;lj ; jklj ;jk ;j ;j ;jk ;j k;k ; ;kjasdfasdfj;k asdfasdf asdfasdf asdf asdfasdfasdf</div>
    <div class="col bg-warning text-right">pushed to other line</div>
  </div>
  <div class="row">
    <div class="col-auto bg-success text-break">small amount of text</div>
    <div class="col bg-warning text-right">same line</div>
  </div>
</div>

方法二：自定义CSS样式 #

如果你想自己控制样式，可以定义一个自定义类，设置强制换行的CSS属性：

.break-long-content {
  overflow-wrap: break-word;
  word-wrap: break-word; /* 兼容旧版浏览器 */
}

然后给第一列添加这个类：

<div class="col-auto bg-success break-long-content">...</div>

效果说明 #

添加样式后，当第一列文本较短时，col-auto会收缩宽度，第二列的col会填充剩余空间，保持两列同行；当第一列文本过长时，文本会在容器内自动换行，当第一列换行后占据了整行宽度，第二列就会自动换行到下一行，完全符合你的需求~

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