1.word-break: break-word与word-wrap: break-word的区别?

答:计算最小宽度(width: min-content)时有区别,word-break: break-word计算的是单个字符的宽度,word-wrap: break-word计算的是单个单词的宽度。

另:word-break:break-word has the same effect as overflow-wrap:anywhere.

2.word-break: break-all与word-wrap: break-word的区别?

答:word-wrap 是用来决定允不允许单词内断句的,如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行,看看下一行的宽度够不够,不够的话就进行单词内的断句。

而word-break:break-all则更变态,因为它断句的方式非常粗暴,它不会尝试把长单词挪到下一行,而是直接进行单词内的断句

3.word-break: break-all与word-wrap: break-word什么时候需要结合使用?

答:word-break: break-all虽然能在任何地方进行断行,但是对于一些中文字符则不行,比如“——”破折号

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p {
background: yellow;
width: 50px;
word-break: break-all;
overflow: hidden;
resize: horizontal;
}
</style>
</head>
<body>
<div class="p">
h12 h1234 hfdaga ————————————————————
</div>
</body>
</html>

上面的破折号就会冲到容器的外面去,这时需要word-wrap: break-word的能力,将这些特殊字符进行断行。

4.line-break:anywhere的作用?

答:即使同时使用了word-break: break-all和word-wrap: break-word,HTML任会遵守一些排版规则,比如中文句号“。”不允许出现在行首。

如果想完全规避这些规则,就使用line-break:anywhere。它是真正意义上的随处断行。

word-break,word-wrap,line-break相关知识的更多相关文章

  1. A space or line break was encountered after the "@" character. Only valid identifiers, keywords, comments, "(" and "{" are valid at the start of a code block and they must occur immediately following

    mvc 控制器调用分布视图出错,("A space or line break was encountered after the "@" character. Only ...

  2. LeetCode 5:Given an input string, reverse the string word by word.

    problem: Given an input string, reverse the string word by word. For example: Given s = "the sk ...

  3. BFS:UVa1590-IP Networks (子网掩码相关知识)

    IP Networks Alex is administrator of IP networks. His clients have a bunch of individual IP addresse ...

  4. reverse the string word by word

    题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is bl ...

  5. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  6. LEB128相关知识

    LEB128相关知识 介绍 LEB128(little endian base 128)是一种变长的整数压缩编码形式,它是出自于DWARF debug file format.在Android的Dal ...

  7. [转帖]xserver相关知识汇总

    xserver相关知识汇总 https://blog.csdn.net/QTVLC/article/details/81739984   本文主要是从以下几个方面介绍xorg-xserver 相关的知 ...

  8. X86 寻址方式、AT&T 汇编语言相关知识、AT&T 与 Intel 汇编语言的比较、gcc 嵌入式汇编

    注:本分类下文章大多整理自<深入分析linux内核源代码>一书,另有参考其他一些资料如<linux内核完全剖析>.<linux c 编程一站式学习>等,只是为了更好 ...

  9. FileStream相关知识分享

    一.如何理解FIleStream 通过前3章的学些,相信大家对于Stream已经有一定的了解,但是又如何去理解FileStream呢?请看下图: 我们磁盘中的任何文件都是通过二进制数组组成,最为直观的 ...

  10. Vim编译器的相关知识

    Vim编译器相关知识 1.关于Vim编译器 在热门Linux操作系统中都会默认安装一款超好用的文本编辑器——名字叫“vim”,vim是vi编辑器的升级版. vim 具有程序编辑的能力,可以主动的以字体 ...

随机推荐

  1. HCNP Routing&Switching之RSTP保护

    前文我们了解了RSTP相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16240348.html:今天我们来聊一聊RSTP保护相关话题: 我们知道RST ...

  2. Centos 7以上安装Docker (亲测有效)

    一.安装前的准备 我的环境是VMware15虚拟机安装的Centos7,Linux内核是3.10.0-1062.4.1.e17.x86_64 1. 用root账户登录查看操作系统内核版本及相关信息 [ ...

  3. 谈谈最近玩的设计软件:Figma 与 Sketch

    谈谈最近玩的设计软件:Figma 与 Sketch 本文写于 2020 年 5 月 9 日 作为一个优秀的开发者,不懂设计是绝对不行的! 毕竟不懂设计的程序员不是好老板. 而做设计,早已不是尺规作图的 ...

  4. 基于 BaGet 搭建 Nuget 服务器

    1 前言 1.1 BaGet 介绍 BaGet 是一个轻量级的,开源的,跨平台的 Nuget 和 symbol 服务器. 1.2 环境介绍 操作系统:CentOS 7 使用 Docker 安装 2 安 ...

  5. 搭建NTP时间服务器~使用NTP同步时间~构建主机间时间自动同步关系

    NTP是一个时间服务器,同时它也是一个时间客户端. 我们可以使用它构建主机与主机之间的时间自动同步环境,保证所有服务器时间一致性. 常用的公共NTP时间服务器有: cn.ntp.org.cn 中国 n ...

  6. 【摸鱼神器】一次搞定 vue3的 路由 + 菜单 + tabs

    做一个管理后台,首先要设置路由,然后配置菜单(有时候还需要导航),再来一个动态tabs,最后加上权限判断. 这个是不是有点繁琐?尤其是路由的设置和菜单的配置,是不是很雷同?那么能不能简单一点呢?如果可 ...

  7. CF1682C. LIS or Reverse LIS?

    题意:给\(n\)个数,问你能构出严格上升子序列长度和下降子序列长度最小值的最大值. 思路: 如果一个数出现至少两次,ans++. 统计出现一次的个数,因为再最长上升子序列中,只能有一个值能贡献到下降 ...

  8. keil的重复定义问题:Error: L6200E: Symbol F6x8 multiply defined

    keil的重复定义问题:Error: L6200E: Symbol F6x8 multiply defined 在驱动oled和电容按键都遇到了,所以记录这个错误,以后再遇到也不至于手足无措 Keil ...

  9. 如何用 UDP 实现可靠传输?

    作者:小林coding 计算机八股文刷题网站:https://xiaolincoding.com 大家好,我是小林. 我记得之前在群里看到,有位读者字节一面的时候被问到:「如何基于 UDP 协议实现可 ...

  10. 如何使用lerna进行多包(package)管理

    为什么要用lerna 将大型代码仓库分割成多个独立版本化的 软件包(package)对于代码共享来说非常有用.但是,如果某些更改 跨越了多个代码仓库的话将变得很 麻烦 并且难以跟踪,并且, 跨越多个代 ...