谈谈white-space和word-wrap

Shihira 发布于2019-08-28 17:51 / 2789人阅读

摘要：有两个属性我一直在混淆着其意义，今天一并整理掉。把折行也看成是一种非保留所有的空格和回车，但是允许折行。仅仅保留回车，会合并空格，且允许折行而正是默认有如下的元素篇首的几个问题，就当是习题好了。

有两个CSS属性我一直在混淆着其意义，今天一并整理掉。

white-space和word-wrap通常用来解决如下问题：

字符串太长，但又不想让其换行，强制其在一行中（如显示代码），如何实现?

单词太长，但如果不折行的话会溢出，我希望它能多行显示。

为什么我明明打了10个空格，可显示出来的只有一个?

为什么我明明敲了10个回车，浏览器却完全不显示?

white-space

white-space可以取如下的值：

normal | nowrap | pre | pre-wrap | pre-line

关于解释，看图比较直接。

以下截图均由如下代码模板得到：


  hello                    world


  my name


    is ssnau, i am living in the beauuuuuutiful hangzhou city

注：segmentfault会在正文压缩图片，点击图片可看原图)

word-wrap

word-wrap能取如下值：

normal | break-word

以下两个示例抄自MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap）

normal: 单词超长也不可折行，产生溢出:

p { width: 13em; background: gold; }

效果：

break-word: 单词超长会折行:

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

效果：

总结

white-space是作用于空格和回车上的，用于控制：

空格是否合并

回车是否解释成折行

句子太长是否在有空格处折行

而word-wrap是作用在单词上，用于控制超长单词是否折行。

注意white-space有一堆pre开头的值，pre到底是什么意思呢？
通常嘛pre是prefix的缩写，不过这可解释不通啊。在html里也有一个

的标签，它们之间有什么联系呢?
其实它们都是preserve（保留）的缩写啦。于是我们可以这么理解：

pre: 保留(preserve)所有的空格和回车，且不允许折行。（把折行也看成是一种非preserve）

pre-wrap: 保留(preserve)所有的空格和回车，但是允许折行(wrap)。

pre-line: 仅仅保留(preserve)回车(line)，会合并空格，且允许折行

而

正是默认有如下CSS的元素：

pre {
    display: block;
    white-space: pre;
}

篇首的几个问题，就当是习题好了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110833.html

谈谈如何用CSS处理文本格式

摘要：一个长单词超出整个容器宽度时是否换行必须注意到，这是一个长单词便超出容器宽度的情况，而且只需考虑英文，中文没有此特性。规定如何处理内容溢出容器属性作用于型元素上。前言文本方面的CSS内容不少，但只要是用过一下office word来编辑过文章的童鞋都能轻易理解其中的大部分。那么，今天仅仅来谈谈其中最复杂的部分——文本格式。处理换行、空格和Tab：white-space 众所周知，...

source 2019-08-28 18:28 评论0 收藏0
white-space、word-wrap和word-break的简单整理

摘要：理解和的区别从易于区分和理解的角度，我引用了无双在你真的了解和的区别吗一文中对两个属性作用的解释属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 white-space 、 word-wrap 和 word-break 是决定段落中的文本如何展示的3个css属性，属性说明请点击链接查看参考手册。 white-space wh...

Magicer 2019-08-30 15:52 评论0 收藏0
CSS 文本控制

摘要：学习一些文本控制的属性，防止做傻事。是的升级版，当单行文本过长，超过文本边界时自动换行。否则，文本仍然左对齐。 one more time one more chance. 一歩重头学前端, css入门。学习一些 CSS 文本控制的属性，防止做傻事。请大家对照下面列表检验下：会的、不会的、似懂非懂的。笔者是一个也不会。 white-space text-overflow: ell...

Taonce 2019-08-29 15:42 评论0 收藏0
简单理解 word-wrap、word-break 和 white-space 的区别

摘要：文本不会换行，文本会在在同一行上继续，直到遇到标签为止。保留空白符序列，但是正常地进行换行。合并空白符序列，但是保留换行符。规定应该从父元素继承属性的值。参考文章你真的了解和的区别吗和区别不设置word-warp和word-break的时候，一行单词，超过了容器的宽度是，会将最后一个单词下移一行进行显示，如果下移的那个单词长度还是超过了容器宽度，则会溢出 word-wrap 设置wo...

spacewander 2019-08-30 15:54 评论0 收藏0
图解CSS3读书笔记文本与颜色

摘要：将内容在边界内换行不截断英文单词换行语法浏览器只在半角空格或连字符的地方进行换行。个人感觉跟类似强行截断英文单词，达到词内换行效果。 CSS3文本 css字体类型属性 font-family, font-style(normal、italic、oblique[倾斜]), font-weight, font-size-adjust(定义是否强制对文本使用同一尺寸,仅火狐支持), font...

lvzishen 2019-08-28 18:26 评论0 收藏0