Question

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

我在下面添加了一段HTML代码。我已在<head>：

中指定了元标记

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

屏幕截图：

HTML code：

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

Answer 1

你可以试试这个。 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>

Answer 2

为避免断开连字符，请使用不间断的连字符。 (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>

Answer 3

不一定是该问题的理想答案，但在类似情况下很有用：

使用“响应式” <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.

Answer 4

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

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

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

Answer 5

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

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

Answer 6

您可以通过减少字体大小来管理自适应样式

Answer 7

我认为媒体查询可以为您提供更好的控制。如果您只想在台式机（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>

和CSS：

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

为响应式设计指定换行符

7 个答案: