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 具有程序编辑的能力,可以主动的以字体 ...
随机推荐
- Blazor和Vue对比学习（基础1.4）：事件和子传父
Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...
- numpy学习笔记Ⅰ
一直被numpy和matplotlib困扰,打算好好学习一下,也是从自己的观点,学对自己帮助最大的部分 主要参考<https: www.runoob.com="" numpy ...
- 基于dhtmlxGantt的Blazor甘特图组件
基于dhtmlxGantt实现的甘特图组件,目前仅做到了数据展现,方法及插槽暂未实现,若需可按照dhtmlxGantt的文档及微软的Balzor文档,自行扩展. 数据发生变化后甘特图会立即发生变化. ...
- 基础路径规划算法(Dijikstra、A*、D*)总结
引言 在一张固定地图上选择一条路径,当存在多条可选的路径之时,需要选择代价最小的那条路径.我们称这类问题为最短路径的选择问题.解决这个问题最经典的算法为Dijikstra算法,其通过贪心选择的步骤从源 ...
- 提升站点SEO的7个建议
1.使用HTTPS 谷歌曾发公告表示,使用安全加密协议(HTTPS),是搜索引擎排名的一项参考因素. 所以,在域名相同情况下,HTTPS站点比HTTP站点,能获得更好的排名. 在网络渠道分发或合作上, ...
- 【算法】选择排序（Selection Sort）（二）
选择排序(Selection Sort) 选择排序(Selection-sort)是一种简单直观的排序算法.它的工作原理:首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余 ...
- Spring Boot整合模板引擎jsp
jsp也算是一种模板引擎吧.整合jsp前,先说一下运行SpringBoot项目的几种方式 1. 运行SpringBoot项目的几种方式 1.1 使用内嵌Tomcat运行项目 在IDE中右键运行启动类, ...
- 以点类 Point 及平面图形类 Plane 为基础设计圆类 Circle
学习内容:以点类 Point 及平面图形类 Plane 为基础设计圆类 Circle 代码示例: import java.util.Scanner; class Point2{ private dou ...
- Java类包
学习内容:Java类包 一.Java类包 1.一个完整的类名需要包名和类名的组合,每一个类都隶属于一个包. 例:完整类名--java.sql.Date 2.同一个包中类相互访问时可以不指明包名. 3. ...
- python之loggin模块与第三方模块
目录 logging模块详解 第三方模块 openpyxl模块 logging模块详解 主要组成部分 logger对象,用于产生日志 # 第一步,创建logger对象 logger = logging ...