关于文本换行有三个属性：

white-space

word-break

word-wrap

white-space

normal 默认。空白会被浏览器忽略
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止
pre-wrap 保留空白符序列，但是正常地进行换行
pre-line 合并空白符序列，但是保留换行符
inherit 规定应该从父元素继承 white-space 属性的值

word-break

normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行。可以理解为空格,特殊符号和标点符号处换行

word-wrap

normal 只在允许的断字点换行（浏览器保持默认处理）
break-word 在长单词或 URL 地址内部进行换行

本文只做简单记录和描述，如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。

css文本是否换行的更多相关文章

  1. CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  2. 彻底搞懂CSS文本、空白换行问题

    首先,我们来整理一下与换行有关的3个CSS属性: word-break 该属性决定文本内容超出容器时,浏览器是否自动插入换行符. 属性值: normal:默认换行规则——英文以词为单位换行,连续字符不 ...

  3. 用css实现文本不换行切超出限制时显示省略号（小tips）

    div{ max-width: 500px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;/*文本不换行*/ } 如上 ...

  4. CSS实现不换行/自动换行/文本超出隐藏显示省略号

    在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...

  5. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  6. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  7. CSS文本与连接

    CSS文本 CSS文本属性可以定义文本外观,通过文本属性,可以改变文本的颜色.字符间距.对齐文本.装饰文本.对文本缩进等等. 常用的文本属性 属性 描述 color 文本颜色 direction 文本 ...

  8. CSS中控制换行的四种属性

    一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例. Example Source Code 语法: white-space : normal  ...

  9. 6.css文本样式

    文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...

随机推荐

  1. 一.rest-framework之版本控制 二、Django缓存 三、跨域问题 四、drf分页器 五、响应器 六、url控制器

    一.rest-framework之版本控制 1.作用 用于版本的控制 2.内置的版本控制 from rest_framework.versioning import QueryParameterVer ...

  2. Oracle使用——oracle复制表

    复制表结构和数据 create table table_name_new as select * from table_name_old; 复制表结构 ; 复制表数据(全量插入数据) 两个表结构相同 ...

  3. CF438E The Child and Binary Tree

    思路 设F(x)的第x项系数为权值和为x的答案 题目中要求权值必须在集合中出现,这个不好处理,考虑再设一个C,C的第x项如果是1代表x出现在值域里,如果是0,代表x没有出现在值域里,然后由于二叉树可以 ...

  4. 【C#数据结构系列】图

    一:图 图状结构简称图,是另一种非线性结构,它比树形结构更复杂.树形结构中的结点是一对多的关系,结点间具有明显的层次和分支关系.每一层的结点可以和下一层的多个结点相关,但只能和上一层的一个结点相关.而 ...

  5. C# winform 选择文件保存路径

    1.winform 点击按钮选择文件保存的路径,效果如下图: 具体代码如下: private void button8_Click(object sender, EventArgs e) { Fold ...

  6. CentOS7.5安装Python3.7报错:configure: error: no acceptable C compiler found in $PATH --Python3

    1.问题解析 报错信息中有这样一条:configure: error: no acceptable C compiler found in $PATH即:配置错误,在$path中找不到可接受的C编译器 ...

  7. Mysql增量恢复

    mysqldump增量恢复何时需要使用备份的数据? 备份最牛逼的层次,就是永远都用不上备份.--老男孩 不管是逻辑备份还是物理备份,备份的数据什么时候需要用?===================== ...

  8. Python自学:第三章 索引从0开始而不是从1

    #返回最后一个,和倒数第二个元素 bicycles = ['trek','cannondale','redline','specialized'] print(bicycles[-1]) print( ...

  9. android ------ RecyclerView 模仿淘宝购物车

    电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. RecyclerView 模仿淘宝购物车功能(删除选择商品,商品计算,选择, 全选反选,商品数量加减等) 看看效果图 ...

  10. vue.config.js初始化配置

    let path = require('path')function resolve (dir) { return path.join(__dirname, dir)} module.exports ...