常见样式问题七、word-break、word-wrap、white-space区别

2023-11-26 16:10

本文主要是介绍常见样式问题七、word-break、word-wrap、white-space区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

首先推荐下MDN网站,在上面可以学习html、css、js。对于css而言,可以查看详细的语法、使用案例、浏览器兼容性。附上链接:https://developer.mozilla.org/zh-CN。

一、基本介绍

1、word-break

MDN上显示语法:

normal | break-all | keep-all | break-word

值:

normal:
使用默认的断行规则。
break-all:
对于non-CJK (CJK 指中文/日文/韩文) 文本,可在任意字符间断行。
keep-all:
CJK 文本不断行。 Non-CJK 文本表现同 normal。

兼容性如下图所示:keep-all的兼容性比较差一些,其他基本上主流的浏览器都能支持。

2、word-wrap

注:word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

word-wrap语法如下:

normal | break-word

值如下:

normal:
表示在正常的单词结束处换行。
break-word:
表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被被分割的单词会被强制分割换行。

3、white-space

语法如下:

normal | pre | nowrap | pre-wrap | pre-line
值如下:
normal:
连续的空白符会被合并,换行符会被当作空白符来处理。填充line盒子时,必要的话会换行。
nowrap:
和 normal 一样,连续的空白符会被合并。但换行符无效。
pre:
所有空白符都会被保留。不会自动换行,原样输出。 
pre-wrap:
保留空白符序列,但是正常地进行换行。
pre-line:
合并空白符序列,但是保留换行符。

上面的换行符是指回车\r、\n、或\r\n。对于<br/>标签,不管是上面哪个属性都会换行的。

如果同时有多个空格、制表符、换行符,最终合并结果是只有一个空格。

pre和pre-wrap的区别在于pre-wrap能够自动换行;pre-wrap和pre-line的区别在于pre-line能够合并空格。

(帮助记忆:wrap在排版中一般指换行)

 空格和制表符换行符自动换行
normal合并合并换行
nowrap合并合并不换
pre保留保留不换行
pre-wrap保留保留换行
pre-line合并保留换行

二、word-break:break-all和word-wrap:nowrap区别

前者是暴力强制换行,不管行末的单词是否显示完整,只要是非中日韩字符,就强制换行;

后者是温柔处理,如果行末没有足够空间可以放下单词,整个单词放到下一行。

html代码如下:

<style> 
p {width: 200px;padding: 5px;background-color: #f0f3f9;font-size: 14px;
}
.word-break {word-break: break-all;
}
.word-wrap {
	white-space: break-word;
}
</style><p class="word-break">这个段落设置了word-break:break-all。</p>
<p class="word-wrap">这个段落设置了white-space:break-word。</p>

效果如下图所示:


三、word-break:keep-all和white-space:nowrap

这两个差别比较大,作用完全不一样。

word-break:keep-all会自动换行,但自动换行不会在词间换行,包括非日韩文以及日韩文。对于非日韩文来说,效果和word-break:normal是一样的。

white-space:nowrap效果是不会自动换行,除非手动添加换行标签。

<style> 
p {width: 200px;padding: 5px;background-color: #f0f3f9;font-size: 14px;
}
.word-break {word-break: normal;
}
.word-keep {word-break: keep-all;
}
.nowrap {white-space: nowrap;
}
</style>
<p class="word-break">这个段落设置了word-break:normal。非中日韩文词间不会断行但日韩文词间换行。</p>
<p class="word-keep">这个段落设置了word-break:keep-all。非中日韩文以及中日韩文的词间都不换行。</p>
<p class="nowrap">这个段落设置了white-space:nowrap。不管文字有多长都不会换行,除非添加换行标签<br/>。<br/>前面有个换行标签</p>

这篇关于常见样式问题七、word-break、word-wrap、white-space区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/425996

相关文章

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时,您应该注意以下几个关键点: 平衡精度 平衡精度是衡量平衡机性能的核心指标,直接影响到不平衡量的检测与校准的准确性,从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声,提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮,适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库,瞬间耗尽数据库资源,导致数据库无法使用。 解决方案: 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内,大量缓存数据同时失效,导致所有请求直接涌向数据库,瞬间增加数据库的负载压力,可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

native和static native区别

本文基于Hello JNI  如有疑惑,请看之前几篇文章。 native 与 static native java中 public native String helloJni();public native static String helloJniStatic();1212 JNI中 JNIEXPORT jstring JNICALL Java_com_test_g

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

题目1254:N皇后问题

题目1254:N皇后问题 时间限制:1 秒 内存限制:128 兆 特殊判题:否 题目描述: N皇后问题,即在N*N的方格棋盘内放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在同一斜线上。因为皇后可以直走,横走和斜走如下图)。 你的任务是,对于给定的N,求出有多少种合法的放置方法。输出N皇后问题所有不同的摆放情况个数。 输入

vscode中文乱码问题,注释,终端,调试乱码一劳永逸版

忘记咋回事突然出现了乱码问题,很多方法都试了,注释乱码解决了,终端又乱码,调试窗口也乱码,最后经过本人不懈努力,终于全部解决了,现在分享给大家我的方法。 乱码的原因是各个地方用的编码格式不统一,所以把他们设成统一的utf8. 1.电脑的编码格式 开始-设置-时间和语言-语言和区域 管理语言设置-更改系统区域设置-勾选Bata版:使用utf8-确定-然后按指示重启 2.vscode

Android fill_parent、match_parent、wrap_content三者的作用及区别

这三个属性都是用来适应视图的水平或者垂直大小,以视图的内容或尺寸为基础的布局,比精确的指定视图的范围更加方便。 1、fill_parent 设置一个视图的布局为fill_parent将强制性的使视图扩展至它父元素的大小 2、match_parent 和fill_parent一样,从字面上的意思match_parent更贴切一些,于是从2.2开始,两个属性都可以使用,但2.3版本以后的建议使