为移动/响应式设计指定换行点

Question

在移动设备/小屏幕视图中，我需要在特定位置断开一行。例如，我希望文本“Commune: CENON-SUR-VIENNE”在冒号字符后换行。是否有一种语法可以手动指定此操作，而不是由Bootstrap 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>

- wiltomap

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>

- Nique Joe

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

- Alexei Tenitski

Answer 3

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

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

使用列或将内容包装在span中已经过度设计；只需添加一个简单的display class，并根据需要显示/隐藏即可。

- Metro Smurf

---

如果您正在使用Bootstrap，这是标准答案。 - rinogo

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>

- Alohci

Answer 5

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

可用类

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

- Gleb Kemarsky

Answer 6

我认为媒体查询可以让你更好地控制。如果你只想在桌面上进行断点（1），而不想在移动设备上进行断点（2），那该怎么办呢？

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

- ow3n

Answer 7

你可以通过减小字体大小来响应式地管理

- Saika

---

嗨，Sarika，字体大小的解决方案不是很准确...对于长单词怎么办？它不适合长单词。 - Sayed Rafeeq

是的，Sayed，我同意你的观点，谢谢。 - Saika