为 mobile/responsive 设计指定换行点

Question

我需要在 mobile/small 视图中的特定点换行。例如，我希望文本 « Commune : CENON-SUR-VIENNE » 在冒号字符后中断。是否有允许手动指定而不是让 Bootstrap CSS 自动执行的语法？

我在下面包含了一段我的 HTML 代码。我已经在 <head> :

中指定了 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>

Answer 1

可以使用available classes"for toggling content across viewport breakpoints"。例如：

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

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

Answer 3

你可以试试这个。 https://jsfiddle.net/5vwh46f8/1/

将第二个单词放入 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>

Answer 4

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

我认为媒体查询可以让您更好地控制。如果您只想在桌面 (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;
    }
}

Answer 6

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

更直接的选择是使用内置于 Bootstrap 的显示器 class 并根据屏幕尺寸隐藏 <br />。

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

在 span 中使用列或包装内容是多余的；只需根据需要添加一点显示 class 和 show/hide。

为 mobile/responsive 设计指定换行点

Specify a line break point for mobile/responsive design

css

line-breaks

twitter-bootstrap

twitter-bootstrap-3