word-break,word-wrap,line-break相关知识
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相关知识的更多相关文章
- 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 ...
 - 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 ...
 - BFS:UVa1590-IP Networks (子网掩码相关知识)
		
IP Networks Alex is administrator of IP networks. His clients have a bunch of individual IP addresse ...
 - reverse the string word by word
		
题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is bl ...
 - HTML入门基础教程相关知识
		
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
 - LEB128相关知识
		
LEB128相关知识 介绍 LEB128(little endian base 128)是一种变长的整数压缩编码形式,它是出自于DWARF debug file format.在Android的Dal ...
 - [转帖]xserver相关知识汇总
		
xserver相关知识汇总 https://blog.csdn.net/QTVLC/article/details/81739984 本文主要是从以下几个方面介绍xorg-xserver 相关的知 ...
 - X86 寻址方式、AT&T 汇编语言相关知识、AT&T 与 Intel 汇编语言的比较、gcc 嵌入式汇编
		
注:本分类下文章大多整理自<深入分析linux内核源代码>一书,另有参考其他一些资料如<linux内核完全剖析>.<linux c 编程一站式学习>等,只是为了更好 ...
 - FileStream相关知识分享
		
一.如何理解FIleStream 通过前3章的学些,相信大家对于Stream已经有一定的了解,但是又如何去理解FileStream呢?请看下图: 我们磁盘中的任何文件都是通过二进制数组组成,最为直观的 ...
 - Vim编译器的相关知识
		
Vim编译器相关知识 1.关于Vim编译器 在热门Linux操作系统中都会默认安装一款超好用的文本编辑器——名字叫“vim”,vim是vi编辑器的升级版. vim 具有程序编辑的能力,可以主动的以字体 ...
 
随机推荐
- 关于控制台报错“Cannot use import statement outside a module”问题的解决
			
问题还原: 1.首先在main.js里 使用ES6语法import引入另外一个js模块. 2.此时将main.js在index.html中通过script标签引入,如下 3.右键通过vscode提供的 ...
 - python和pycharm下载与安装
			
python解释器 1.python的由来 Python诞生于1989年的一个圣诞节,其创作者Guido van Rossum为了打发圣诞节假期的无聊,便开始了Python语言的编写.Python第一 ...
 - 一键解决Win10 LTSC 2021官方镜像存在的问题
			
一键解决Win10 LTSC 2021官方镜像存在的问题 由于适用了win10 ltsc 2021之后,发现官方镜像存在一些致命的bug.但是本人又喜欢这个官方精简的系统,所以进行了一些修复.并将搜集 ...
 - ELK   1.3之kibana
			
1.安装kibana,直接压缩包安装就可以,kibana默认端口5601 2.配置kibana配置文件 [root@kibana config]# vim /opt/kibana/config/kib ...
 - Kubernetes API 基础
			
APIServer 在kubernetes架构概念层面上,Kubernetes由一些具有不同角色的服务节点组成.而master的控制平面由 Apiserver Controller-manager 和 ...
 - Spring Boot整合模板引擎freemarker
			
jsp本质是servlet,渲染都在服务器,freemarker模板引擎也是在服务器端渲染. 项目结构 引入依赖pom.xml <!-- 引入 freemarker 模板依赖 --> &l ...
 - npm删除依赖包
			
第一种办法删除全部依赖包 npm uninstall *( 删除指定的依赖包 npm uninstall xxx删除全局的指定依赖 npm uninstall xxx -gxxx为依赖名称)清缓存 n ...
 - 题解 CF1095F 【Make It Connected】
			
题意简述 \(n\)( \(1≤n≤2×10^5\) )个点,每个点 \(i\) 有一个点权 \(a_i\) ( \(1≤a_i≤2×10^{12}\) ),将两个点 \(i\),\(j\) 直接相连 ...
 - 关于JNPF3.4版本的三大改变,你真的了解了吗?
 - static关键字——JavaSE基础
			
static关键字 由于static跟随类被加载,因此静态代码块.构造方法.匿名代码块的执行顺序为静态代码块→匿名代码块→构造方法 public class Demo01 { public stati ...