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

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. JS设计模式（10）职责链模式（重要）

    什么是职责链模式? 重要性:4 星,在项目中能对 if-else 语句进行优化 定义:避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到 ...

  2. JAVASCRIPT 分层概念

    1)底层(框架提供): 封装DOM和Event相关操作,提供跨浏览器兼容的接口,扩展原生javascript语言本身不提供的但又特实用的接口,例如namespace; 2)抽象类层(框架提供 统一自定 ...

  3. JavaScript形而上的策略模式

    什么是策略模式? 先看代码片段1. // 代码片段1 var bonus = new Bonus(); bonus.setSalary(10000); bonus.setStrategy(new pe ...

  4. angular --- s3core移动端项目（三）

    angular.module('myApp') .directive('listActive',functon(){ return { restrict:'A', scope:{ listActive ...

  5. 函数式语言简介(functional language)

    1.什么是函数式语言?        是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分是原始函数.定义函数和函数型.这种语言具有较强的组织数据结构的能力,可以把某一数据结构(如数组)作为单一值处 ...

  6. postman管理收藏夹，批量执行接口

    ①创建一个新的收藏夹,在弹出的对话框中输入收藏夹的名称和描述然后点击Create按钮创建 ②保存接口请求到收藏夹或文件夹 注意:表单格式的request和二进制格式的request中包含的文件是不会被 ...

  7. Java集合框架源码分析（2）LinkedList

    链表(LinkedList) 数组(array)和数组列表(ArrayList)都有一个重大的缺陷: 从数组的中间位置删除一个元素要付出很大的代价,因为数组中在被删除元素之后的所有元素都要向数组的前端 ...

  8. yii中接收微信传过来的json数据

    //控制器<?php namespace frontend\controllers; use frontend\models\User; use yii; use yii\web\Control ...

  9. Kali linux 2016.2（Rolling）里安装OpenVAS

    不多说,直接上干货! 本博文,是在Kali 2.0 linux里,安装OpenVAS. 前言 OpenVAS是一款开放式的漏洞评估工具,主要用来检测目标网络或主机的安全性.与安全焦点的X-Scan工具 ...

  10. laravel orwhere的使用