html中div不自动换行、强制不换行的具体实现
发布时间：2014-01-26 17:49:21 作者：佚名 
我要评论
我要评论本文为大家介绍下html 中div不自动换行的多种实现，如可以使用nobr标签实现不换行，用nowrap元素等等，感兴趣的朋友可以参考下
1.用<nobr>标签实现不换行
<div>Hello world！<nobr> Hello world!<nobr></div>
2.用<用nowrap元素>标签
<div nowrap>Hello world! Hello world! Hello world! Hello world!</div>
3强制不换行
div{
white-space:nowrap;
}
4.如果是两个div，可使用float实现不换行
<div class="class1">hello </div>
<div class="class2">world! </div>
.class1 {float:left;}
5.在div中也可使用display实现不换行
<div class="class1">hello </div>
<div class="class2">world! </div>
.class1 {display:inline;}
.class2{display:inline;}
复制代码
代码如下:<div>Hello world！<nobr> Hello world!<nobr></div>
2.用<用nowrap元素>标签
复制代码
代码如下:<div nowrap>Hello world! Hello world! Hello world! Hello world!</div>
3强制不换行
复制代码
代码如下:div{
white-space:nowrap;
}
4.如果是两个div，可使用float实现不换行
复制代码
代码如下:<div class="class1">hello </div>
<div class="class2">world! </div>
.class1 {float:left;}
5.在div中也可使用display实现不换行
复制代码
代码如下:<div class="class1">hello </div>
<div class="class2">world! </div>
.class1 {display:inline;}
.class2{display:inline;}
相关文章
在使用 canvas 绘制某字符串的时候，我们可能想要让该字符串在某处按要求换行。那么应该如何实现，本文就来介绍一下，有兴趣的可以了解一下2018-09-17- 在显示评论列表的时候因为有固定宽，但是显示的内容超出的了div的宽，在这种情况下我们需要将其换行，实现的css代码如下2014-07-22
- 文字会自动换行，可以使用css来解决这个问题，word-break属性想必大家并不陌生吧，不熟悉的朋友可以看看本文2014-05-08
- 该CSS方案可让pre标签内的文本自动换行，我在我有的浏览器上都测试了一下，全部支持，IE6，IE7,IE8,Firefox,Opera,Safari和Chrome。2010-01-17
- 这时候，你可以使用overflow:auto; (当代码超出容器边界的时候，显示滚动框)， 但这个方法也并不适用于所有主流浏览器，一些浏览器会直接截断超出的内容 。 我们都知道&l2009-06-06
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
这篇文章主要介绍了如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度的相关资料,需要的朋友可以参考下2019-08-01
最新评论