防止H1标记中断到新行
防止H1标记中断到新行
提问于 2014-02-21 14:10:57
我正在创建一个使用基金会的动态网页。一切都完美无缺地过渡到手机和平板电脑。但是，我在1920年的x1080监视器上创建了这个。当我在1280x1024显示器上测试它时，我的H1标志和h2标签断了。
我不知道怎么解决这个问题。这是我的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-->回答 6
Stack Overflow用户
回答已采纳
发布于 2014-02-21 14:15:34
如果要防止h1拆分为多行，可以使用以下语句：
h1 { white-space: nowrap; }这只适用于支持CSS3的浏览器，您可能必须在包含的元素上设置一个overflow属性。
我确实认为你可能想为这个问题寻找一个不同的解决办法。对于小屏幕上的标题来说，h1太大了。
使用CSS文件中的@media查询，您可以在彼此下面显示这两个div，或者在较小的屏幕上缩小字体大小。
Stack Overflow用户
发布于 2014-02-21 14:15:58
要么使用CSS：
#logo h1 {
white-space: nowrap;
}或者更改标题的文本：
<h1>VoIP Innovations</h1> 是一个用于“非制动空间”的HTML实体。我倾向于使用它，因为所有浏览器都支持它。
Stack Overflow用户
发布于 2019-11-14 17:31:44
对于我来说，BootStrap 4起作用了。
<h2 style="display:inline">ABC</h2><h3 style="display:inline">abc</h3>style="display:inline"必须在两个相邻的H标记中才能工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21936773
复制相关文章
相似问题
腾讯云开发者
