你可以试试这个。https://jsfiddle.net/5vwh46f8/1/
把第二个单词放在一个span中，并添加一个样式inline-block。

<div class="container">
<div class="tab-content">
<div class="col-lg-5">
  <div>
  <h4>Commune : <span>CENON-SUR-VIENNE</span></h4>
  </div>
</div>
</div>
</div>

<style>
h4 span{
display: inline-block;
} 
</style>

使用“响应”<br>标记：

<style>
br.responsive {
  display: inline; // Show BR tag for narrow screens
}

@media (min-width: 320px) { // or whatever you are after
  br.responsive {
    display: none; // Hide BR tag for wider screens
  }
}
</style>

Some text <br class="responsive" /> more text.

更直接的选择是使用Bootstrap内置的display classes，并根据屏幕大小隐藏<br />。

<h4>Commune : <br class="d-md-none" />CENON-SUR-VIENNE</h4>

在span中使用列或 Package 内容是多余的;只需添加一个小显示类，并根据需要显示/隐藏。

若要避免在连字符处断开，请使用不断开的连字符。(U+2011)

h4 { width: 200px }

<h4 class="using regular hyphen">Commune : CENON-SUR-VIENNE</h4>
<hr>
<h4 class="using non-breaking hyphen">Commune : CENON‑SUR‑VIENNE</h4>

可以使用可用类“”在视口断点“”之间切换内容。例如：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<h4>Commune : <span class="visible-xs-inline"><br></span> CENON-SUR-VIENNE</h4>

我认为媒体查询可以给予你更好的控制。如果你只想在桌面上中断（1）而不想在移动的上中断（2）呢？
1.

HTML：

<div class="col-12 text-center">   
    <h2>If many are doing something, <span class="break-mobile">it must be worthwhile</span></h2>
</div>

以及CSS：

@media (min-width: 700px) {
    .title-break {
        display: inline-block;
    }
}

您可以通过减小字体大小以响应式管理