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 具有程序编辑的能力,可以主动的以字体 ...
随机推荐
- golang get process name by pid
一个很好的问题:How golang to get process name by process id (pid)? 目前看来go api并没有提供通过pid获取进程名称的方法,可以通过 /proc ...
- 国产化设备鲲鹏CentOS7上源码安装Python3.7
具体编译过成与正常的Python源代码在x86平台上的过程无异,此篇随笔仅当用作复制黏贴的备忘录.不得不说在一个老旧系统上安装一个老旧的Python版本,从头编译一个Python还是一个较为稳健的选择 ...
- Java学习笔记-基础语法Ⅲ
继承:子类使用extends来继承父类,子类可以有父类的内容,还可以有子类自己特有的内容 继承的好处: 提高了代码的复用性(多个类相同的成员可以放到同一个类中) 提高了代码的维护性(如果方法的代码需要 ...
- 深入C++06:深入掌握OOP最强大的机制
深入掌握OOP最强大的机制 1. 继承的基本意义 类与类之间的关系:①组合:a part of ... 一部分的关系:②继承: a kind of ... 属于同一种的关系: 继承的本质:a. 代码的 ...
- windows获取高精度时间戳 精度100ns
#include <stdio.h> #include <Windows.h> int main(void){ LARGE_INTEGER ticks,Frequency; Q ...
- 群晖下 gitea+drone+harbor实现CI/CD 发布到云服务器
常用命令 sudo -i然后输入密码登录root账户(群晖默认只能使用admin账号登陆) vim xxx编辑(编辑是进去之后按i,退出并保存是按esc,然后:wq!再回车) mkdir xx创建文件 ...
- Mysql命令行插入字段超长不报错,而jdbc报错问题分析
异常信息 exception.ServiceException: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Data too long ...
- KNN算法推理与实现
Overview K近邻值算法 KNN (K - Nearest Neighbors) 是一种机器学习中的分类算法:K-NN是一种非参数的惰性学习算法.非参数意味着没有对基础数据分布的假设,即模型结构 ...
- Hash表、 继承
Hash表 我们来了解什么是Hash表?? 要想知道什么是哈希表,那得先了解哈希函数 二叉平衡树 红黑树 B B+树,它们的查找都是先从根节点进行查找,从节点取出数据或索引与查找值进行比较.那么,有没 ...
- .NET中的迭代器(Iterator)
更新记录 本文迁移自Panda666原博客,原发布时间:2021年6月30日. 一.迭代器介绍 C#2.0开始,我们可以使用迭代器(iterator).编译器自动把我们定义的迭代器生成 可枚举类型 或 ...