Html 防止 H1 标签换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21936773/
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
Prevent H1 tag from breaking to new line
提问by onTheInternet
I am creating a dynamic web page using foundation. Everything transitions flawlessly to phones and tablets. However, I have creating this on a 1920 x 1080 monitor. And when I tested it on a 1280 x 1024 monitor, my H1 logo and h2 tagline broke.
我正在使用基础创建一个动态网页。一切都可以完美地过渡到手机和平板电脑。但是，我是在 1920 x 1080 显示器上创建的。当我在 1280 x 1024 显示器上测试时，我的 H1 标志和 h2 标语坏了。
Im not sure how to fix this. Here is my CSS and HTML.
我不知道如何解决这个问题。这是我的 CSS 和 HTML。
/*Header*/
#Header{
max-height:106px;
min-height:105px;
background-color:#666666;
border-bottom-width:3px;
border-bottom-style:solid;
border-bottom-color:white;
}
#logo{
max-height:106px;
border-right-width:3px;
border-right-style:solid;
border-right-color:white;
line-height:none;
text-align:center;
background-color:#f58026;
}
#logo h1{
margin-top:10px;
font-weight:400;
font-family:'Gill Sans MT';
font-size:2em;
margin-bottom:0px;
}
#logo h2{
margin-top:0px;
font-weight:500;
font-family:'Myriad Pro' ,Arial;
font-style:italic;
color:white;
font-size:1em;
padding-bottom:15px;
}
<div class="row collapse" id="voipHeader">
<!--Logo-->
<div id="logo" class="large-2 columns small-12 columns">
<h1></h1>
<h2>Your Premier </h2>
</div>
<!--Navigation-->
<div id="navigation" class="large-10 columns small-12 columns">
<ul>
<li><a href="#">Clients</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Inquiry Form</a></li>
</ul>
</div>
</div><!--End Row-->
回答by Marijke Luttekes
If you want to prevent your h1to break into multiple lines, you can use the following statement:
如果你想防止你h1分成多行，你可以使用以下语句：
h1 { white-space: nowrap; }
This only works in browsers which support CSS3 and you may have to set an overflowproperty on the containing element.
这仅适用于支持 CSS3 的浏览器，您可能需要overflow在包含元素上设置一个属性。
I do think you may want to look for a different solution to this issue. Your h1is simply too big for your header on small screens.
我确实认为您可能想为这个问题寻找不同的解决方案。您h1对于小屏幕上的标题来说太大了。
Using @mediaqueries in your CSS files, you can either display the two divs below each other or reduce the font size on smaller screens.
@media在 CSS 文件中使用查询，您可以将两个 div 显示在彼此下方或在较小的屏幕上减小字体大小。
回答by Kroltan
Either use CSS:
要么使用CSS：
#logo h1 {
white-space: nowrap;
}
or change your title's text:
或更改标题的文本：
<h1>VoIP Innovations</h1>
is a HTML entity for a "non-braking space". I would be inclined using it since all browsers support it.
是“非制动空间”的 HTML 实体。我倾向于使用它，因为所有浏览器都支持它。
回答by Nitesh
Use white-space:nowrap;to achive what you are looking for.
使用white-space:nowrap;才达到你在找什么。
For Instance,
例如，
#logo h1 {
white-space: nowrap;
}
回答by leftmostlane
This worked for me with BootStrap 4
这对我有用 BootStrap 4
<h2 style="display:inline">ABC</h2><h3 style="display:inline">abc</h3>
The style="display:inline"had to be in both neighboring H tags for it to work.
将style="display:inline"不得不在它两个相邻^ h标签的工作。
