`

white-space:

阅读更多
定义和用法
white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

默认值: normal
继承性: yes
版本: CSS1
JavaScript 语法: object.style.whiteSpace="pre"

实例
规定段落中的文本不进行换行:
p
  {
  white-space: nowrap
  }
TIY

浏览器支持
所有浏览器都支持 white-space 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

可能的值
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。




参考资料:http://www.w3school.com.cn/css/pr_text_white-space.asp
分享到:
评论

相关推荐

    css white-space:nowrap属性用法(可以强制文字不换行输出)

    在CSS中,`white-space` 属性用于控制元素内的空白符处理方式,它允许开发者对文本的换行、缩进和空白字符的行为进行定制。在某些场景下,我们可能需要强制文本不换行,保持在一行内显示,这就是`white-space: ...

    white-space:nowrap的应用

    为了解决这个问题,我们可以利用CSS中的`white-space: nowrap`属性。 `white-space`属性控制元素内的空白字符如何处理。默认情况下,浏览器会自动折行以适应容器的宽度,但`white-space: nowrap`属性则禁止这种自动...

    无js实现text-overflow: ellipsis; 完美支持Firefox

    ` 通常与 `white-space: nowrap;` 和 `overflow: hidden;` 配合使用,以达到截断并显示省略号的效果。例如: ```css .container { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ...

    collapse-white-space:用单个空格替换多个空格字符

    import { collapseWhiteSpace } from 'collapse-white-space' collapseWhiteSpace ( '\tfoo \n\tbar \t\r\nbaz' ) //=&gt; ' foo bar baz' 原料药 该程序包导出以下标识符: collapseWhiteSpace 。 没有默认导出。 ...

    IE6,IE7下实现white-space:pre-wrap

    `white-space` 是一个关键的CSS属性,它决定了浏览器如何处理元素内的空白字符,如空格、制表符和换行符。`white-space: pre-wrap` 是这个属性的一个值,它允许保留空白符和换行,同时支持自动换行,使得内容可以在...

    css文本换行属性word-wrap和white-space使用总结

    今天碰到了td文字内容不换行,发现是:white-space: nowrap,即强制文本不进行换行,顺便看了一下文本换行的属性word-wrap,总结如下: white-space的默认只是normal,自动换行。 word-break:break-all和word-wrap:...

    使用white-space来阻止文字显示自动换行

    `white-space` CSS 属性正是为此而生,它允许我们精确地定义文本如何处理空白、换行和其他空白字符。在标题提及的场景中,`white-space` 被用来阻止文字自动换行,以确保所有文字都在同一行内显示,即使内容超过了...

    h5实现移动端横向滚动tab,并响应内容

    white-space: nowrap; } .tab { flex: 1; padding: 16px; text-align: center; } ``` 为了让内容响应式,我们可以使用媒体查询(`media query`)来调整不同屏幕尺寸下的显示。例如,当屏幕宽度小于某个值时,...

    使用text-overflow:ellipsis实现文字超出用省略号显示

    其中,`overflow: hidden` 属性隐藏溢出的内容,`white-space: nowrap` 确保文本在一行内显示,不会换行。 具体来说,要实现文字超出用省略号显示的效果,可以按照以下步骤进行设置: 1. `white-space: nowrap;` ...

    CSS 数字和字母将容器撑大问题解决

    对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html &lt;div id=wrap&gt;正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal...

    view-source:PHP脚本,用于显示网站HTML源代码,并突出显示语法并美化用于移动设备的代码-Show source code

    查看资料 ... 设置 ... ... 在移动设备上,创建一个具有适当名称的书签,例如“ View Source 。 在URL字段中,输入... white-space : pre-wrap; word-wrap : break-word; } 美化HTML Beautify HTML有许多选项可以自定义HTM

    三星9305收索

    white-space:nowrap;overflow:hidden}.bdsug .bdsug-direct p img{width:16px;height:16px;margin:7px 6px 9px 0;vertical-align:middle}.bdsug .bdsug-direct p span{margin-left:8px}.bdsug .bdsug-direct p i{...

    word-break:break-all和word-wrap:break-word区别总结

    然而,使用 `white-space` 属性时需要注意,单词间的空格必须使用标准的空格字符,而非制表符或连续空格,否则可能导致换行失效。 在表格布局方面,`table-layout:fixed` 与 `table-layout:auto` 也是控制表格布局...

    CSS属性 - white-space 空白属性使用说明

    CSS 属性 - white-space 空白属性使用说明 白白空属性是 CSS 中一个重要的属性,它用于控制 HTML 元素中的空白处理。通过设置 white-space 属性,我们可以控制文本在元素中的换行、空格和制表符等空白符的处理方式...

    css中强制换行word-break、word-wrap、white-space区别实例说明

    复制代码代码如下:”c1″&gt;safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj&lt;/div&gt;&lt;div class=c1&gt;This is all English. This is all English. This is all English.&lt;/div&gt;&lt;div class=c1&gt;全是中文的情况。...

    使用text-overflow:ellipsis实现溢出文本省略号显示无需js

    今天在做jsp页面展示的时候碰到一个...还需要设置 white-space 属性为 nowrap (限制不换行) 和 overflow 属性为 hidden (隐藏溢出) 即设置样式 style="text-overflow:ellipsis; white-space: nowrap; overflow:

    CSS中overflow-y: visible;不起作用的原因分析及解决方法

    场景 最近要做的一个需求是移动端的h5页面,要求有一排可选择的卡片, 超出容器... white-space: nowrap; overflow-x: auto;不就搞定了嘛。Demo如下: &lt;div class=delete_btn&gt;&lt;/div&gt; &lt;div class=delete_btn&gt;

Global site tag (gtag.js) - Google Analytics