换行规则

CSS可以指定文字多行时换行的规则，说白了就是指定哪些地方可以换行

相关属性

word-break

The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.

word-break属性决定了文本溢出时内容区的文本换行方式

属性值

关键值

normal(默认值)

break-all

允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行

看起来就是超出部分直接截断，无论单词是否完整

keep-all

不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致

break-world(被废弃)

word-break

属性值

关键值

normal(默认值)

break-word

表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

word-break:break-all和word-wrap:break-word的区别

word-break: break-all 在任意溢出都换行，word-wrap:break-word 如果这一行文字有可以换行的点，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，则就不打英文单词或字符的主意了，让这些换行点换行，至于对不对齐，好不好看，则不关心

总结

目前单词断行没有那么受重视，可以直接使用word-break:break-all 达到断行不留空白的效果，更多应用，后续遇到会添加

CSS换行知识的更多相关文章

  1. css基本知识

    WANGJUN59451   css基本知识 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HT ...

  2. CSS 基本知识

    1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的 ...

  3. CSS换行2

    1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...

  4. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  5. CSS 基本知识梳理-续

    CSS 基本知识 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网 ...

  6. [HTML & CSS] HTML和CSS基础知识

    最近将博客简单地修饰了下,需要用到HTML和CSS代码,花了一天时间学习了一下这两方面的知识.虽然内容很简单,但是足够用来修改自己的博客了. 1. HTML 1.1. HTML介绍 HTML与CSS的 ...

  7. CSS基础知识筑基

    01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...

  8. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  9. css基本知识框架图

    css基本知识框架:(一:基本知识缩影.二基本知识框架图) 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部样式 3.样式表配置方法 4 ...

随机推荐

  1. python-3-条件判断练习题

    前言 我们在前面两章学习了基础数据类型与条件判断语句,今天我们来做下练习题.如果你有不一样的解题思路在评论区亮出你的宝剑!!! 一.习题如下: 1.使用 while 循环输出 1 2 3 4 5 6 ...

  2. Comment file

    /// This is the head comment of a file. /*********************************************************** ...

  3. 【大数据】SparkSql 连接查询中的谓词下推处理 (一)

    本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/YPN85WBNcnhk8xKjTPTa2g 作者:李勇 目录: 1.SparkSql 2.连接查询和 ...

  4. Vue.js 源码分析(二十四) 高级应用 自定义指令详解

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上 ...

  5. TiDB 压力测试报告

    (转载自公众号DBATech) 一.测试环境 1.tidb 集群架构: 测试使用最基本的TiDB架构.即 3个tidb-server节点+ 3个tikv节点 + 3个pd节点. 2.tidb集群的部署 ...

  6. Entity Framework 6 中如何获取 EntityTypeConfiguration 的 Edm 信息？（三）

    接着上一篇,我们继续来优化. 直接贴代码了: LambdaHelper.cs using System; using System.Collections.Generic; using System. ...

  7. 数据持久化之Data Volume

    废话不多说直接操作 1.启动一个MySQL测试容器 [root@localhost labs]# docker pull mysql #下载MySQL镜像 [root@localhost labs]# ...

  8. Spring-AOP源码分析随手记(二)

    这次来分析下切面的执行过程. 1.怎么看? 怎么开始看源码呢?就直接从被增强的方法调用那里打断点,看看怎么执行的: 然后就来到了这: 2.初步分析 里面有段: if (this.advised.exp ...

  9. WPF 有任何Focus问题，就找 Keyboard_Navigation

    牛牛的博客 https://www.cnblogs.com/smallidea/p/3412699.html 参照官网教程: https://docs.microsoft.com/en-us/dotn ...

  10. 大文件SQl脚本怎么还原以及SQlsqlserver怎么全自动备份数据库

    1:导出的SQl脚本文件通常大于100M左右就会还原不了,不是报错就是说系统文件找不到(sql脚本是直接拖进来的,不存在路径的问题). 2:CMD 使用 OSQL命令或者Sqlcmd命令都是可以解决的 ...