css如何设置不换行?

在HTML网页中文章标题列表通常要使用H标签样式,使用此样式后文本就会自动换行,但是我们通常不想换行,那么我们该如何使用css设置不换行呢?下面我们来看一下css设置不换行的方法。

我们可以通过为元素设置css样式white-space:nowrap;使元素内文本不换行。white-space属性设置如何处理元素内的空白。

css设置不换行实例:

设置2个对象盒子,一个设置强制同行显示文本内容。第二个设置强制同行显示,但使用html br标签观察效果。为了white-space案例应用效果,我设置css宽度一定120px,css高度为60px,css行高 line-height为20px 。

css代码:

<style> 
div{ width:120px; height:60px; line-height:20px} 
.divcss{ white-space:nowrap} 
</style>

HTML代码:

<div class="divcss">内容将在一行内强制显示完整</div> 
<div class="divcss">内容使用br换行<br /> 
将会不被<br />换行显示</div>

日常我们为了让文字内容在一行内显示完,哪怕宽度不够也不能换行,我们可以使用white-space样式,但如果遇到了html br强制换行标签,无论是设置white-space与否都会被<br>强制换行。

以上就是css如何设置不换行?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏