- 浏览: 1110907 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
在 github 的代码浏览页面,可以看到这样的 css 样式:
显示效果:
重点:
多个空格缩进的效果是由: white-space: pre; 控制的。
——————————————————————————————————————————————————————————————
语法:
Definition and Usage
The white-space property specifies how white-space inside an element is handled.
Property Values
REF: http://www.w3schools.com/cssref/pr_text_white-space.asp
-
<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
-
发表评论
-
Flex之 justify-content 和 flex-direction 的应用
2021-12-23 19:39 397flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 753效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 437css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8282Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
HTML5之canvas之粒子效果
2018-01-26 10:32 1466效果图: JavaScript 代码实现: & ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2406在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1317HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
CSS之提示框实现
2017-08-02 05:08 1961效果图: 注意以下要点: 1、提示框的箭头效果,且箭头 ... -
Responsive Web Design(自响应式网页设计)
2017-05-28 22:43 1243Responsive Web Design(自响 ... -
css 之 linear-gradient 之 进度条(progress bar)
2017-05-25 18:14 2186CSS 的 linear-gradient() 函数会创建 ... -
在 css 中使用 @font-face
2017-05-24 14:15 554@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 653Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 927A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 680导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1093效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2911效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16767- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2219原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4561效果: 代码: <!DOCTYPE htm ... -
[css - hr ] border color 横线高度和颜色
2016-04-28 10:59 3728如果设定 hr 的 border,会发现其高度会比不设置高2倍 ...
相关推荐
white-space: pre-wrap; } /* 自动换行,合并空白 */ .normal-style { white-space: normal; } ``` 需要注意的是,`white-space: nowrap` 只会影响元素内的文本,如果子元素设置了换行,那么子元素的文本仍然会...
总的来说,`white-space: pre-wrap` 是一个强大的CSS工具,它允许我们在保持原始文本格式的同时,使文本在网页上具有良好的可读性和流动性。然而,对于老旧的IE6和IE7浏览器,开发者需要额外的工作来实现这一功能,...
在做企业站的英文版的时候,英文单词由于剩下的空间不足,导致整个单词都换行,造成单词之间的空隙太大。如下图: 使用css属性word-break:break-all;...overflow:hidden 隐藏 white-space:normal 默认 pre 换行
white-space: nowrap | normal | pre | pre-wrap | pre-line | break-spaces; } ``` - `normal`(默认值):允许正常换行,即空格会被合并,多余的换行也会被忽略。 - `nowrap`:强制在同一行内显示所有文本,直到...
CSS中的word-break、word-wrap和white-space属性都是用来控制文本如何在容器内换行或者处理长单词或者字符串溢出容器边界的属性。尽管这三个属性的作用有些相似,但它们在处理文本换行的细节上有所不同,下面将详细...
CSS 属性 - white-space 空白属性使用说明 白白空属性是 CSS 中一个重要的属性,它用于控制 HTML 元素中的空白处理。通过设置 white-space 属性,我们可以控制文本在元素中的换行、空格和制表符等空白符的处理方式...
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: ...
white-space:nowrap; course:hand; margin:0 auto;} HTML---------------------- 非常多的字数你能控制得了不可能的骗你是小狗</div> ---------------------------------------------------------------------...
white-space: nowrap; ``` #### 四、显示属性 (Display Properties) **1. 显示模式** (`display`) - `block`:块级元素 - `inline`:内联元素 - `list-item`:列表项 - `run-in`:追加局部 - `compact`:...
pre { white-space: pre-wrap; } ``` - **list-style-type**:定义列表项标记的类型。例如: ```css ul { list-style-type: square; } ``` - **list-style-image**:定义列表项标记的图像。例如: ```css ul ...
CSS提供了多种方法来实现这一目标,其中一种常用的技术是通过`text-overflow`、`overflow`以及`white-space`等属性的组合来实现文本溢出时的截断与省略号显示效果。 #### 二、关键概念与属性介绍 ##### 1. `text-...
- **示例**: `white-space: nowrap;` - **版本**: CSS1 **12. word-spacing** - **功能**: 设置单词间距。 - **示例**: `word-spacing: 1em;` - **版本**: CSS1 --- #### 四、CSS字体属性(Font) **1. font** -...
- `white-space: pre;` 保留空白字符。 - `white-space: nowrap;` 不换行显示文本。 ### 显示模式(Display) 1. **显示模式** (`display`): - `display: block;` 块级元素。 - `display: inline;` 内联元素。...
6. **进阶技巧:** 除了基本用法,还可以结合CSS动画和JavaScript事件监听,创建更复杂的交互效果,比如在特定事件触发打印,或者与其他页面元素联动。 7. **版本更新与社区支持:** 开源项目通常会有持续的维护和...
如果需要兼容旧版本的浏览器,可以添加其他前缀的 `white-space` 属性值,如 `-moz-pre-wrap`(针对早期的 Mozilla 浏览器)、`-pre-wrap`(Opera 4-6)和 `-o-pre-wrap`(Opera 7)。 以下是一个完整的 CSS 样式...
综上所述,通过合理地使用 CSS 的 `white-space`、`word-wrap` 和 `word-break` 属性,我们可以有效地控制页面上的文本换行行为,并且考虑到不同浏览器的兼容性问题。这在实际的Web开发工作中是非常有用的技巧。
**7.4 white-space** - **作用**:定义如何处理空白字符。 - **值**: - normal:合并空白字符为单个空格。 - pre:保留所有空白字符。 - nowrap:不允许换行。 **7.5 width、height** - **作用**:设置元素的...
white-space: pre; } ``` #### List-style-type - **描述**:定义列表项目的标记类型。 - **示例代码**: ```css ul { list-style-type: circle; } ``` #### List-style-image - **描述**:定义列表项目的...
- `white-space: pre;` 保留空格和换行。 - `white-space: nowrap;` 不换行。 #### 四、显示模式(Display Properties) **1. 显示模式 (Display Mode):** - `display: block;` 作为块级元素显示。 - `display: ...
`white-space`属性用于控制元素内的空白字符处理方式,其可选值有`normal`、`pre`和`nowrap`。`normal`是默认值,允许文本自动换行;`pre`保留换行和空白字符;`nowrap`则强制文本在同一行显示,直到遇到`br`元素。 ...