早在 2007 年就有人向 w3 组织提交了css 草案 white-space-collapse 。不过一直没有得到实现,而且各大浏览器貌似也不想实现。先看下 white-space-collapse 的作用吧
white-space-collapse 用于设置或者检索对象内包含的空格字符,属性有:
- collapse 使用一个单一的字符序列呈现空白(或在某些情况下,没有字符)。
- preserve 呈现所有的空白,换行符将被保留
- preserve-breaks 抛弃所有空白,但保留空白
- discard 抛弃所有空白
也就是说 如果采用了 white-space-collapse:discard;那么下面的代码
<span>字</span> <span>符中间有空白</span>
而现在由于没有实现white-space-collapse,我们可能要用很多方法来解决中间出现空白的问题,其中最简单也是最繁琐的方法是,手工去掉空白
<span>字</span><span>符中间没有空白</span>
这种方法很繁琐,但是没有副作用。
各大浏览器要实现这个的话,想想问题还真多,比如直接的空白符号和转义 这种2种写法应该是有不同处理的,很可能影响太大了。
相关推荐
- **浏览器兼容性**:不同的浏览器对CSS的支持程度存在差异。如IE浏览器与Mozilla Firefox在处理某些CSS属性时可能有所不同。例如,对于`margin`和`padding`的处理,IE浏览器可能会与Mozilla有所不同。 #### 二、...
- **原因**: 默认`display: block`和`white-space`。 - **解决办法**: 设置`display: inline-block`,或者调整`margin`和`padding`。 **14. 浏览器兼容性问题的解决方法及常用hack技巧?** - 使用条件注释。 - ...
white-space: nowrap; /* 禁止内容换行,保持在同一行 */ border-collapse: collapse; } .scrolling-table th, .scrolling-table td { width: 100px; /* 设置单元格固定宽度 */ box-sizing: border-box; /* ...
4. 文本属性:vertical-align、text-decoration、white-space 5. 定位属性:float、clear、top、right、bottom、min-、max- 6. 生成内容属性:content、content-reset、content-increment 7. 页面样式属性:size、...
- `white-space`: 规定元素中的空白处理方式,如换行、缩进等。 - `word-spacing`: 控制单词间的间距。 4. **字体属性(Font)**: - `font`: 一次性设置所有字体属性,包括家族、大小、样式等。 - `font-...
- `white-space: normal;`(默认换行) - `white-space: pre;`(保留空格和换行) - `white-space: nowrap;`(不换行) ### 四、边框样式 #### 1. 边框宽度 (Border Width) - `border-width: 2px;`(设置边框...
white-space: nowrap; } ``` #### 5. 固定宽度表格布局 - 当需要固定宽度的表格布局时,可以使用`table-layout: fixed`和`word-break: break-all`属性。 ```css table { table-layout: fixed; word-break: ...
- `blink`: 闪烁(浏览器不支持)。 8. **`font-family`**: 指定字体族。 - 示例: `Courier New`, `Arial`, `Times New Roman`等。 #### 背景(Background)属性 1. **`background-color`**: 设置背景颜色。 -...
- 使用`overflow: hidden`, `text-overflow: ellipsis`和`white-space: nowrap`组合,可以在有限空间内优雅地处理文本溢出,特别是在标题或简介等元素中特别有用。 #### 10. 条件注释与IE兼容性 - 对于Internet ...
- `white-space`:空白符处理。 #### 表格(Tables) 表格属性控制HTML表格的布局和显示。 - `caption-side`:表格标题的位置。 - `table-layout`:表格布局算法。 - `border-collapse`:边框合并方式。 - `border-...
`unicode-bidi`控制Unicode文本的双向显示,`white-space`管理空白处理,`word-spacing`调整单词间的距离。 字体属性`font`是一个简写属性,可以一次性设置`font-family`(字体家族)、`font-size`(字体大小)、`...
`text-transform`改变字母大小写,`vertical-align`设置元素的垂直对齐,`white-space`管理空白处理,防止文本自动换行或合并。 布局属性涉及元素的尺寸、位置和边框。`border`是一个综合属性,用于设置所有边框,...
18. **排版方式(White-space)**:控制文本的换行和空白处理。 19. **表格样式**: - `table-layout: fixed`:固定表格列宽。 - `caption-side: bottom`:将表格标题置于底部。 - `border-collapse: collapse`...
`letter-spacing`和`word-spacing`分别控制字母和单词的间距,`line-height`设定文本行高,`text-indent`用于首行缩进,`white-space`管理文本的换行行为,例如`normal`、`pre`(预排版)和`nowrap`(不换行)。...
3. **文本属性**:`color`, `font`, `text-decoration`, `text-align`, `vertical-align`, `white-space`, `other text`, `content` #### 五、ID和Class命名规则 在命名ID和Class时,应该尽量使用有意义的名称,以...
white-space:nowrap; }`** - 对于超出容器的文本采用省略号处理,保持布局整洁。 ### 颜色类 - **`.maxColor{ color:#707070; }`**、**`.minColor{ color:#8f8f8f; }`**、**`.cBlack{ color:#000000; }`** - ...
- **示例:** `white-space: nowrap;` **应用场景:** - 常见于代码展示或者特殊布局需求,例如保持源代码的格式不变。 #### `direction` **定义与功能:** - **定义:** 设置文本的方向,即从左至右(LTR)或从右...
支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...
20. `white-space`: 控制空白字符的处理,`pre`保留空白符,`nowrap`不换行,`normal`是默认行为。 21. `display`: 决定元素如何显示,`inherit`表示继承父元素的显示方式。常见的有`block`(块级元素)、`inline`...
还可以设置文本对齐(text-align)、换行(white-space)、装饰(text-decoration,如下划线、删除线)和缩进(text-indent)。 CSS2.0还允许我们控制元素的背景,如背景颜色(background-color)、背景图像...