Css 指定响应设计的换行符

我找不到如何指定当屏幕不够大时字符串应该在哪一点断开。例如，我希望文本«Commune:CENON-SUR-VIENNE»在冒号字符后断开。是否有一种语法允许手动指定，而不是让引导CSS自动指定

我在下面包含了一段HTML代码。我已经在

中很好地指定了meta标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

截图：

HTML代码：

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

公社：塞农苏尔维安

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

Commune:
CENON-SUR-VIENNE

您可以通过减小字体大小以响应式的方式进行管理

您可以试试这个

将第二个单词放在span中并添加样式内联块

<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>

公社：塞农苏尔维安
h4跨度{
显示：内联块；
} 

要避免在连字符上断开，请使用不断开的连字符

h4{宽度：200px}

公社：塞农河畔维也纳

Commune:CENON-SUR-VIENNE

我认为媒体查询可以让您更好地控制。如果您只想在桌面上中断（1）不想在手机上中断（2），该怎么办

HTML：

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

---

对于这个问题不一定是一个很好的答案，但在类似情况下很有用：

使用“响应”标签：

反应灵敏{
display:inline；//为窄屏幕显示BR标记
}
@介质（最小宽度：320px）{//或您想要的任何介质
反应灵敏{
显示：无；//隐藏BR标记以显示更宽的屏幕
}
}
一些文本
更多文本。

更简单的选择是使用内置的显示类引导并根据屏幕大小隐藏

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

公社：
塞农河畔维也纳

---

在跨距中使用列或包装内容是过分的；只需添加一个小的显示类，并根据需要显示/隐藏。

嗨，Sarika，不是精确的字体大小解决方案……那么长单词呢。这不适合长篇大论。是的，赛义德，我同意你的观点，谢谢

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