为响应式设计指定换行符答案

【问题标题】：Specify a line break point for mobile/responsive design为响应式设计指定换行符
【发布时间】：2016-10-13 21:40:51
【问题描述】：

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

我在下面包含了一段我的 HTML 代码。我已经很好地指定了 <head> 内的元标记：

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

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 line-breaks

【解决方案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>

【讨论】：

【解决方案2】：

这个问题不需要一个好的答案，但在类似情况下很有用：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

如果您使用的是 Bootstrap，这是规范的答案。

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

我认为媒体查询可以让您更好地控制。如果您只想在台式机上中断 (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】：

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

【讨论】：

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