首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

熟悉white-space

定义和用法 white-space 属性设置如何处理元素内的空白。 这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。...说明 值 默认值 normal 继承性 yes 版本 CSS1 JavaScript 语法 object.style.whiteSpace=”pre” 浏览器支持 所有浏览器都支持 white-space...文本不会换行,文本会在在同一行上继续,直到遇到 标签为止 pre-wrap 保留空白符序列,但是正常地进行换行 pre-line 合并空白符序列,但是保留换行符 inherit 规定应该从父元素继承 white-space...通常的做法是这样的: overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap...; width:100%; 其中,overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;-o-text-overflow: ellipsis针对Opera

81630

不简单的 white-space 属性

white-space 是 CSS 的属性。从字面上来看,这是一个与空白相关的属性。好像也没啥东西,但从其实没那么简单。...详细介绍 white-space 属性可以包括以下 3 个方面内容 **1 如何处理文本内容中的多个空格和 Tab? ** 策略1: 折叠。...white-space 有如下可选值 normal(默认值) nowrap pre pre-wrap pre-line 这些值的具体说明 换行符 空格和 Tab 文本超出容器宽度 nomal 忽略 折叠...为以上属性的一个简写 white-space: [new-line] [space-and-tab] [text-wrapping]; 这样,理解 white-space 简单的多,设置起来也灵活的多...参考 网易微专业之《前端工程师》学习笔记(1)-CSS文本格式 white-space ---- 本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

1.2K30

【CSS】419- 彻底搞懂word-break、word-wrap、white-space

white-space 正如它的名字,这个属性是用来控制空白字符的显示的,同时还能控制是否自动换行。...(为了方便比较,下文所有图,左侧为 normal 即初始情况,右侧为赋上相应值时的情况) 先看下white-space: nowrap时的情况: ?...white-space: pre ? 空格和换行符全都被保留了下来!不过自动换行还是没了。保留,所以 pre 其实是preserve的缩写,这样就好记了。...white-space: pre-wrap ? 显然 pre-wrap 就是 preserve+wrap ,保留空格和换行符,且可以自动换行。 white-space: pre-line ?...属性除了列出的那三个值外,也有个 break-word 值,效果跟这里的 word-wrap: break-word 一样,然而只有Chrome、Safari等部分浏览器支持) 总结 最后总结一下三个属性 white-space

2.9K10

如何在 IE6,7 下实现 white-space: pre-wrap;

随着对 CSS 的了解不断深入,我们发现,原来这一切都是 white-space 属性在安排。 元素之所以如此神奇,是因为它自身具有 {white-space: pre;} 这一默认样式。...white-space 属性 CSS 中的 white-space 属性用于设置文本空白符的处理规则,这其中包括:是否合并空白符、是否保留换行符、是否允许自动换行。...因此,{white-space: pre;} 样式有时候并不能满足我们的期望。....content { white-space: pre-wrap; } 但为了应付 IE6,7,我们需要将上述 CSS 代码修改如下: .content { white-space: pre-wrap...首先,在 IE6,7 下,{white-space: pre-wrap;} 这条样式声明由于不能识别而被丢弃,于是我们为 .content 另外设置了 {white-space: pre;} 的样式。

2.2K31

这样理解white-space属性的取值,你会不知不觉的记住了所有

前言 white-space这个属性就是用来处理空格的,主要有五个取值(normal,nowrap,pre,pre-wrap,pre-line)。...white-space:normal image.png 右边的文本前部有两个空格,三个hello合并成一个长单词,还有一个换行符。 所以,通过效果可以看出默认是: 文首的空格被忽略。...white-space:nowrap image.png white-space属性为nowrap时,与normal区别是不会因为超出容器宽度而发生换行 white-space:pre image.png...和上一篇说的pre标签效果一样: 展示结果原始文本完全一致,所有空格和换行符都保留了 white-space:pre-wrap image.png 从语义上也可以得出结论: 同样按照...标签的方式处理,和pre取值唯一区别是超出容器宽度时,会发生换行 white-space:pre-line image.png 从上面效果可以看出,换行符没有转成空格,所以它的控制规则是

13.5K20
领券