CSS：overflow-wrap文本溢出换行

1、概述

CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。

备注：与word-break相比，overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。

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

可选择的值

overflow-wrap: normal;
overflow-wrap: break-word;

解释：
normal
行只能在正常的单词断点处中断。（例如两个单词之间的空格）。

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {width: 13em;margin: 2px;background: gold;}.ow-anywhere {overflow-wrap: anywhere;}.ow-break-word {overflow-wrap: break-word;}.word-break {word-break: break-all;}.hyphens {hyphens: auto;}</style>
</head><body><p>They say the fishing is excellent atLake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,though I've never been there myself. (<code>normal</code>)</p><p>They say the fishing is excellent atLake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p><p>They say the fishing is excellent atLake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p><p>They say the fishing is excellent atLake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,though I've never been there myself. (<code>word-break</code>)</p><p>They say the fishing is excellent atLake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p><p lang="en">They say the fishing is excellent atLake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,though I've never been there myself. (<code>hyphens</code>, English rules)</p><p class="hyphens" lang="de">They say the fishing is excellent atLake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,though I've never been there myself. (<code>hyphens</code>, German rules)</p>
</body></html>

2、结果

CSS：overflow-wrap文本溢出换行相关推荐

web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
【用CSS让单行文本溢出显示省略号】
如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-col ...
小技巧！CSS 整块文本溢出省略特性探究
大家好,我是若川.欢迎加我微信 ruochuan12,长期交流学习.今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节.点击下方卡片关注我,或者查看源码系列文章. 文本超长打点我们都知 ...
html中怎么让text不换行,css如何让文本不换行？
在html中,连续的数字和字母,以及字母和数字的组合是不会自动换行的:而汉语文字或者其他国家的文字,是文字就会有换行.那么如何让文本不换行?下面本篇文章就来给大家介绍一下,希望对你们有所帮助. 在cs ...
简单处理文本溢出换行显示
注意:使用word-wrap:break-word 不生效的情况: 1.对行元素不生效; 2.代码里有默认设置的不换行; 3.由于粘贴复制的英文段落,导致文字换行不生效,有时候是文字被切割,于是删除 ...
css实现超出文本溢出用省略号代替
一.单行实现单行文本的溢出显示省略号使用text-overflow:ellipsis属性,但需要配合使用另外两个属性使用才能达到效果. 如下: overflow:hidden; text-overf ...
css之-单行文本溢出显示省略号，多行文本溢出显示省略号
单行显示省略号 white-spacing:nowrap; overflow:hidden; text-overflow:ellipsis; 规定某行显示省略号 -webkit-line-climp: ...
文字超过省略_纯CSS实现“文本溢出截断省略”的几种方法
在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节.看上去 "稀松平常" ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基 ...
限制文本行数，CSS文本溢出省略号，及兼容火狐
一,css\处理行数溢出隐藏,省略号.....注:此方法不兼容火狐 1.单行隐藏.hhh{ overflow: hidden;/*文本不换行*/white-space: nowrap;/*文字超出用省 ...

CSS：overflow-wrap文本溢出换行

1、概述

2、结果

CSS：overflow-wrap文本溢出换行相关推荐

最新文章

热门文章