CSS如何实现在DIV中强制不换行?

发布时间:2020-09-05编辑:脚本学堂
本文主要介绍在div中利用css实现不换行的方法,需要的朋友参考一下。

在以前解决不换行的问题用word-break:keep-all;但是遇到数字,或者英文或者标点,依然会换行,一个好方法CSS属性white-space:nowrap;强制不换行实现了。
以下是相关内容介绍:
 

复制代码 代码示例:

white-space语法: white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit

取值: normal | pre | nowrap | pre-wrap | pre-line | inherit

normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行

pre: 保持HTML源代码的空格与换行,等同与pre标签 这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode
支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于
normal 。

nowrap: 强制文本在一行,除非遇到br换行标签

pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行

pre-line: 同pre属性,但是遇到连续空格会被看作一个空格

inherit: 继承
 

利用css的这个属性自己可以写一个例子试试。