css怎么让div不换行

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

如果想让文字在一行显示，不要自动换行。将 white-space 样式设置为 nowrap 即可。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>PHP中文网</title>

    <style>

.content {

  width: 150px;

  height: 60px;

  background-color: lightcyan;

  white-space: nowrap;

}

    </style>

  </head>

  <body>

    <div class="content">

       PHP中文网 欢迎您 欢迎您 欢迎您

    </div>

  </body>

</html>

效果图：

58d56dfa9a296ad7e559dfc0a306aed.png

white-space 属性

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。

属性值：

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

【推荐学习：css视频教程】

以上就是css怎么让div不换行的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

css中怎么将div设置为居中

移动端全景装修图的实现实例分享

asp怎样引入css样式

css sprite优缺点有哪些

css如何实现圆角内凹效果

如何使用css来控制页面

css中zoom属性有什么作用

css怎么让连续数字字母换行

css中的流体布局是什么

css怎么去掉下划线样式

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...