你的位置:首页 > 软件开发 > 网页设计 > 文本换行word

文本换行word

发布时间:2016-02-05 17:00:07
本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401671055&idx=1&sn=b88c986e61708da0027fac035ad36f0f#rd对于后续文章感兴趣的 ...

本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401671055&idx=1&sn=b88c986e61708da0027fac035ad36f0f#rd

对于后续文章感兴趣的可以添加关注:

文本换行word

文中有些地方没显示全,查看全部内容,请点击上面的原文链接哈

在对页面内容进行排版的时候,不可避免的会遇到对文本进行处理的问题。今天整理了文本换行相关的内容,记录下来分享之。毕竟,好记性不如烂笔头嘛。

对于文本换行,自己之前也处理过相关的问题。知道要用到word-wrap,word-break和white-space等相关的样式规则。然而对于它们三个之前到底有什么区别,还说不清楚。本着理论与实践相结合实事求是的原则,今天抽时间看了下。

在mozilla官网上搜word-wrap会得到如下解释:

The word-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

word-break的解释:

The word-break CSS property is used to specify whether to break lines within words.

word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时而出现溢出包含框的现象。

word-break表明怎样进行单词内的断句。

从字面意思来看这两个都是用来对文本进行换行的,那么这两个到底有什么区别呢?我们来看一下官网上给出的例子。

首先看一下word-wrap的语法:

word-wrap: normal;word-wrap: break-word;当指定word-wrap:normal(默认值)时,我们看到Fernstraßenbauprivatfinanzierungsgesetzesund   这串单词很长des后面的位置显示不下,它会换一行显示,而且还从它的容器中溢出了。

 

p { width: 13em; background: gold; word-wrap: break-word; }

当我们给p元素加上样式word-wrap:break-word时运行结果如下图:

文本换行word    word-break:normal Use the default line break rule.也就是也就是单词过长时不换行,超出的部分溢出。

再来看word-break: break-all

 

<p>2. <code>word-break: break-all</code></p><p class="breakAll narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p>
.breakAll {    word-break: break-all;}

运行结果如下图:

文本换行word    但有时候我们可能会碰到这样的需求,对于中文不让它进行换行,在同一行进行显示,这时候就是keep-all出场的时候了。在上图的例子的基础上,加上word-break:keep-all之后的显示效果如下图:

文本换行word

原标题:文本换行word

关键词:word

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。