word-break、word-wrap、white-space的用法
word-break、word-wrap、white-space的用法
word-break、word-wrap、white-space的用法一、word-wrap
1、语法
word-wrap : normal | break-word
2、值的说明
(1)、normal:默认值,单词如果单词超长,会冲出边界(单个单词超长,在当前行显示)
(2)、break-word:将内容在边界内换行,当单词在当前行放不下时,会自动切换到下一行(单个单词超长,在下一行显示)
3、注意事项
只对英文起作用,以单词作为换行依据。
二、word-break
1、语法
word-break:normal | break-all | keep-all
2、值的说明
(1)、normal:默认值,到边界处的汉字换行,如果是英文整个单词换行,如果出现某个单词长度过长,则会撑破容器,如果边框为固定属性,则后面部分将无法显示;(单个单词长度超过容器长度)
(2)、break-all:可以强行截断英文单词,强行换行
(3)、keep-all:不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,如果出现某个英文字符长度超过边界,则后面的部分将撑破容器,如果边框为固定属性,则后面部分无法显示
3、注意事项
word-break值为break-all时,只对英文起作用,以字母作为换行依据。
三、white-space
1、语法
white-space:normal | nowrap | pre-wrap | pre-line | inherit
2、值的说明
(1)、normal:为其默认值。空白符会被浏览器忽略,往往可以通过设置这个值恢复到默认值下
(2)、nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止
(3)、pre-wrap:保留空白符,但是正常地进行换行。
(4)、pre-line:合并空白符,但是保留换行符。
(5)、inherit:从父元素继承white-space属性的值。
3、注意事项
(1)、white-space值为pre-wrap时,只对中文起作用,强制换行。
(2)、white-space值为inherit时,在所有的IE版本都不支持。
热门推荐
- canvas动态图(canvas绘制太极图的实现示例)
- laravel接口请求模拟(Laravel框架控制器的request与response用法示例)
- 使用vue组件开发项目(Vue记事本实例详解)
- docker资源隔离的实现方式(docker配置openGauss数据库的方法详解)
- linuxcrontab怎么不执行(Linux crontab 命令的使用)
- 微信小程序可以用h5开发不(微信小程序webView嵌入H5的方法实例)
- 数据库操作题(数据库日常练习题,每天进步一点点2)
- js基础入门到高级教程(浅谈如何循序渐进的学好JS)
- css如何将元素显示到最上面(css中子元素设置margin-top为什么影响了父元素)
- ajax回调函数不执行