`

CSS之 white-space : pre

    博客分类:
  • css
阅读更多
在 github 的代码浏览页面,可以看到这样的 css 样式:
<td class="blob-code-inner">        
  <span class="pl-k">throw</span> 
  <span class="pl-k">new</span> 
  <span class="pl-en">Error</span>(
  <span class="pl-s">
     <span class="pl-pds">"</span>
     Chartbeat: Please specify an api key and host!
     <span class="pl-pds">"</span>
  </span>);
</td>

<style>
.blob-code-inner {
    overflow: visible;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 12px;
    color: #333;
    word-wrap: normal;
    white-space: pre;
</style>



显示效果:
// 注意:前面是有多个空格缩进的。
    throw new Error("Chartbeat: Please specify an api key and host!");




重点:

多个空格缩进的效果是由: white-space: pre; 控制的。

——————————————————————————————————————————————————————————————

语法:


Definition and Usage
The white-space property specifies how white-space inside an element is handled.


Property Values

__Value__ __Description__
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a BR tag is encountered
pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the PRE tag in HTML
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks






REF: http://www.w3schools.com/cssref/pr_text_white-space.asp







-


分享到:
评论

相关推荐

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

    white-space: pre-wrap; } /* 自动换行,合并空白 */ .normal-style { white-space: normal; } ``` 需要注意的是,`white-space: nowrap` 只会影响元素内的文本,如果子元素设置了换行,那么子元素的文本仍然会...

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

    总的来说,`white-space: pre-wrap` 是一个强大的CSS工具,它允许我们在保持原始文本格式的同时,使文本在网页上具有良好的可读性和流动性。然而,对于老旧的IE6和IE7浏览器,开发者需要额外的工作来实现这一功能,...

    英文强制换行css 使用css强制英文单词断行代码

    在做企业站的英文版的时候,英文单词由于剩下的空间不足,导致整个单词都换行,造成单词之间的空隙太大。如下图: 使用css属性word-break:break-all;...overflow:hidden 隐藏 white-space:normal 默认 pre 换行

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

    white-space: nowrap | normal | pre | pre-wrap | pre-line | break-spaces; } ``` - `normal`(默认值):允许正常换行,即空格会被合并,多余的换行也会被忽略。 - `nowrap`:强制在同一行内显示所有文本,直到...

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

    CSS中的word-break、word-wrap和white-space属性都是用来控制文本如何在容器内换行或者处理长单词或者字符串溢出容器边界的属性。尽管这三个属性的作用有些相似,但它们在处理文本换行的细节上有所不同,下面将详细...

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

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

    Less详解.pdf 电子书文档

    white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; }`。然后,可以在其他样式中调用,例如 `pre { .wrap }`。输出结果为 `pre { text-wrap: wrap; white-space: pre-wrap; white-space: ...

    用CSS控制标题字数

    white-space:nowrap; course:hand; margin:0 auto;} HTML---------------------- 非常多的字数你能控制得了不可能的骗你是小狗&lt;/div&gt; ---------------------------------------------------------------------...

    css样式大全精华版.docx

    white-space: nowrap; ``` #### 四、显示属性 (Display Properties) **1. 显示模式** (`display`) - `block`:块级元素 - `inline`:内联元素 - `list-item`:列表项 - `run-in`:追加局部 - `compact`:...

    css属性表与用法

    pre { white-space: pre-wrap; } ``` - **list-style-type**:定义列表项标记的类型。例如: ```css ul { list-style-type: square; } ``` - **list-style-image**:定义列表项标记的图像。例如: ```css ul ...

    CSS控制html文本溢出

    CSS提供了多种方法来实现这一目标,其中一种常用的技术是通过`text-overflow`、`overflow`以及`white-space`等属性的组合来实现文本溢出时的截断与省略号显示效果。 #### 二、关键概念与属性介绍 ##### 1. `text-...

    css参考文件

    - **示例**: `white-space: nowrap;` - **版本**: CSS1 **12. word-spacing** - **功能**: 设置单词间距。 - **示例**: `word-spacing: 1em;` - **版本**: CSS1 --- #### 四、CSS字体属性(Font) **1. font** -...

    基本CSS样式表大全

    - `white-space: pre;` 保留空白字符。 - `white-space: nowrap;` 不换行显示文本。 ### 显示模式(Display) 1. **显示模式** (`display`): - `display: block;` 块级元素。 - `display: inline;` 内联元素。...

    控制台打印文字效果js插件-typed.js

    6. **进阶技巧:** 除了基本用法,还可以结合CSS动画和JavaScript事件监听,创建更复杂的交互效果,比如在特定事件触发打印,或者与其他页面元素联动。 7. **版本更新与社区支持:** 开源项目通常会有持续的维护和...

    pre标签的css代码,防止代码pre中代码过长等问题

    如果需要兼容旧版本的浏览器,可以添加其他前缀的 `white-space` 属性值,如 `-moz-pre-wrap`(针对早期的 Mozilla 浏览器)、`-pre-wrap`(Opera 4-6)和 `-o-pre-wrap`(Opera 7)。 以下是一个完整的 CSS 样式...

    CSS 文字自动换行

    综上所述,通过合理地使用 CSS 的 `white-space`、`word-wrap` 和 `word-break` 属性,我们可以有效地控制页面上的文本换行行为,并且考虑到不同浏览器的兼容性问题。这在实际的Web开发工作中是非常有用的技巧。

    Css属性文档

    **7.4 white-space** - **作用**:定义如何处理空白字符。 - **值**: - normal:合并空白字符为单个空格。 - pre:保留所有空白字符。 - nowrap:不允许换行。 **7.5 width、height** - **作用**:设置元素的...

    css 属性列表很多

    white-space: pre; } ``` #### List-style-type - **描述**:定义列表项目的标记类型。 - **示例代码**: ```css ul { list-style-type: circle; } ``` #### List-style-image - **描述**:定义列表项目的...

    CSS样式大全(参考)

    - `white-space: pre;` 保留空格和换行。 - `white-space: nowrap;` 不换行。 #### 四、显示模式(Display Properties) **1. 显示模式 (Display Mode):** - `display: block;` 作为块级元素显示。 - `display: ...

    用css截取字符的几种方法详解(css排版隐藏溢出文本).pdf

    `white-space`属性用于控制元素内的空白字符处理方式,其可选值有`normal`、`pre`和`nowrap`。`normal`是默认值,允许文本自动换行;`pre`保留换行和空白字符;`nowrap`则强制文本在同一行显示,直到遇到`br`元素。 ...

Global site tag (gtag.js) - Google Analytics