twitter-bootstrap 为响应式设计指定换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37790283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Specify a line-break for responsive design
提问by wiltomap
I can't find how to specify at which point a string should break when a screen is not large enough. For instance, I'd like the text ? Commune : CENON-SUR-VIENNE ? to break after the colon character. Is there a syntax that allows to specify this manually instead of leaving Bootstrap CSS doing it automatically?
我找不到如何指定当屏幕不够大时字符串应该在哪个点中断。例如，我想要文字？公社 : CENON-SUR-VIENNE ? 在冒号字符后中断。是否有允许手动指定它而不是让 Bootstrap CSS 自动执行的语法？
I include a piece of my HTML code below. I have well specified the meta tag inside the <head>:
我在下面包含了一段我的 HTML 代码。我已经很好地指定了里面的元标记<head>：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Screenshot :
截屏 ：
HTML code:
HTML代码：
<div class="container">
<div class="tab-content">
<div class="col-lg-5">
<div>
<h4>Commune : CENON-SUR-VIENNE</h4>
</div>
</div>
</div>
</div>
回答by Nique Joe
you could try this. https://jsfiddle.net/5vwh46f8/1/
你可以试试这个。https://jsfiddle.net/5vwh46f8/1/
Putting the second word in a span and adding a style inline-block.
将第二个单词放在 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>
回答by Alohci
回答by Gleb Kemarsky
You can use the available classes"for toggling content across viewport breakpoints". For example:
您可以使用可用的类“跨视口断点切换内容”。例如：
<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>回答by Saika
You Can Manage in responsive style through decrease font-size
您可以通过减小字体大小以响应式风格进行管理
回答by ow3n
I think a media query could give you better control. What if you only wanted to break on desktop (1) didn't want it to break on mobile (2)?
我认为媒体查询可以让您更好地控制。如果您只想在台式机上中断 (1) 不想在移动设备上中断 (2) 怎么办？
The HTML:
HTML：
<div class="col-12 text-center">
<h2>If many are doing something, <span class="break-mobile">it must be worthwhile</span></h2>
</div>
And the CSS:
和 CSS：
@media (min-width: 700px) {
.title-break {
display: inline-block;
}
}
回答by Alexei Tenitski
Not necessary ideal answer for this question, but useful in many similar situations:
这个问题的理想答案不是必需的，但在许多类似情况下很有用：
Use "responsive" <br>tag:
使用“响应式”<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.
