彻底搞懂word-wrap,word-break,white-space

2024-05-24 04:11:31

一. 应用场景

我们在渲染文字时，内容可能是非CJK(中，日，韩文)的单词，这时可能会出现内容超出容器不换行等问题。
例如

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title></title><style type="text/css">* {margin: 0;padding: 0;}.div01 {width: 300px;height: 200px;padding: 8px;border: 2px solid #000000;/* overflow:hidden;word-break: break-all;white-space: nowrap;text-overflow: ellipsis */}</style>
</head>
<body><div class="div01">hello,jack,i,sandy,week,and,sandy,week,and,sandy,week,and,sandy,week,and,sandy,week,and,sandy,week,and</div>
</body>
</html>

界面展示

默认情况下：

遇到空格、换行符、分隔符会自动换行，当内容为非CJK(中，日，韩文)的单词其它情况下，即便内容超出容器也不会换行；
多个换行符会合并成一个

二. word-wrap

取值：normal/break-word;
break-word：当文字超出容器范围时，强制让单词打断。

三. word-break

取值： normal/break-all/keep-all
break-all：单词之间的间断，如果有半角空格和连字符，换行符等都不会换行，内容超出容器会换行；
keep-all: 半角空格和连字符会自动换行,内容超出容器不会换行

四. whit-space

取值：normal/pre/nowrap/pre-wrap/pre-line
normal: 多个换行符和空格符会合并成一个，内容超出容器换行；
nowrap 多个换行符和空格符会合并成一个，内容超出容器不换行；
pre: 不会合并换行符和空格符，内容超出容器不换行；
pre-line: 合并空格符。但是不会合并换行符，内容超出容器会换行；
pre-wrap: 不会合并换行符和空格符，内容超出容器会换行

五. word-wrap: break-word和word-break： break-all 区别

word-wrap: break-word
当遇到可以换行的点，如空格之类的，就不打英文单词或字符的主意了，在这些换行点换行；
word-break： break-all
只有内容超出容器时才会换行

例如：文字里面添加空格

<div class="div01">week,and,sandy,week,and,sandy,week,and,   sandy,week,and,week,and,sandy,week,and,sandy,week,and,sandy,week,and</div>

word-wrap: break-word
word-break： break-all

六. 实战演练（文字超出时…显示）

css代码

{overflow: hidden;word-break: break-all;white-space: nowrap;text-overflow: ellipsis
}

彻底搞懂word-wrap,word-break,white-space相关推荐

永中word页码怎么从第二页开始_pdf如何在线转word？这样做，分分钟搞定pdf转word...
原标题:pdf如何在线转word?这样做,分分钟搞定pdf转word 上了初中以后,我感觉到学习压力更大了,特别是写作文.记得小学时,我的作文还被老师当堂表扬过,现在最多只能拿到合格线分数.为了提高语 ...
15个小时彻底搞懂NLP自然语言处理（2021最新版附赠课件笔记资料）【LP自然语言处理涉及到深度学习和神经网络的介绍、 Pytorch、 RNN自然语言处理】笔记
15个小时彻底搞懂NLP自然语言处理(2021最新版附赠课件笔记资料)[LP自然语言处理涉及到深度学习和神经网络的介绍. Pytorch. RNN自然语言处理] 笔记教程与代码地址 P1 机器学习与 ...
opc服务器是硬件吗,opc是什么（一文彻底搞懂什么是OPC）
原标题:(opc是什么(一文彻底搞懂什么是OPC)) opc是什么(一文完全搞懂什么是OPC)从2000年终以来,我们就一直在运用OPC软件互操纵性范例,而那些正准备踏入和想要踏入工业自动化范畴的人们 ...
李宏毅——一天搞懂深度学习PPT学习笔记
李宏毅一天搞懂机器学习PPT,SildeShare链接:https://www.slideshare.net/tw_dsconf/ss-62245351?qid=108adce3-2c3d-4758- ...
带你彻底搞懂锁膨胀，偏向锁，轻量级锁，重量级锁
1.synchronized 我们都知道synchronized内部有四种状态,分别是:无锁.偏向锁.轻量级锁和重量级锁,所以要搞懂这几种锁之间的变化我们得对synchronized有个大致的了解. ...
Transformer一文搞懂
transformer一天搞懂 1 transformer 1.1 从整体来看transformer干的事情 1.2 位置编码 1.3 注意力机制(3个向量,3个阶段) 1.3.1 从图像上理解 1. ...
android串口编程实例_PLC编程由浅到深 | 如何搞懂西门子PLC脉冲输出
点击箭头处"工业之家",选择"关注公众号"! 如何搞懂西门子PLC脉冲输出西门子S7-200PLC有两个PT0/PWM发生器(脉冲输出/脉宽调制),它们可以产 ...
【四】彻底搞懂synchronized
[四]彻底搞懂synchronized 废话不多说,我们先来看一个段代码,了解一个奇怪的现象 public class Synchronized03 implements Runnable {priv ...
想开发IM集群？先搞懂什么是RPC！
本文引用了后端技术指南针公众号"浅谈RPC那些事儿1"和即时通讯网的"即时通讯新手入门:快速理解RPC技术--基本概念.原理和用途"两篇文章的部分内容. 1.引 ...
python语言语句快的标记是什么_一文搞懂Python程序语句
原标题:一文搞懂Python程序语句程序流 Python 程序中常用的基本数据类型,包括: 内置的数值数据类型 Tuple 容器类型 String 容器类型 List 容器类型自然的顺序是从页面或 ...

最新文章

热门文章