HTML、css、js 特殊字符(空格符号)

本文详细介绍了HTML中用于空格的特殊字符,包括 、 和 等,它们分别表示不同宽度的空格。 不受字体影响但宽度可变, 和 则分别占据1/2和1个中文宽度,并且宽度相对稳定。此外,还提到了 、‌和‍这三种特殊字符的用途。

HTML中的 & nbsp; & ensp; & emsp; 6种空格标记

         不会累加的(只算1个),且该空格占据宽度受【字体】影响明显而强烈 
      <button type="button">&nbsp;&nbsp;&nbsp;&nbsp;</button><br />
      
       &ensp; 占据的宽度正好是1/2个中文宽度,且基本上不受字体影响 
      <button type="button">&ensp;&ensp;</button><br />
      
       &emsp; 占据的宽度正好是1个中文宽度,且基本上不受字体影响 
      <button type="button">&emsp;</button><br />
      
       &thinsp; 占据的宽度比较小,它是em之六分之一宽 
      <button type="button">&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;</button><br />
      
       &zwnj; (零宽不连字)是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,
      而是以这两个字符原本的字形来绘制 
      
       &zwj; (零宽连字)是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,
      使得这两个本不会发生连字的字符产生了连字效果 

参考:
HTML中的& nbsp; & ensp; & emsp;等6种空格标记:https://www.cnblogs.com/salicejy/p/css.html
HTML CSS JS 特殊字符编码表:https://www.cnblogs.com/fml1com/p/5149269.html

### CSS 中的空白字符处理 在 CSS 中,`white-space` 属性用于控制元素内的空白符(包括空格、制表符和换行符)如何被解析和显示。常见的 `white-space` 值有以下几个: - **normal**: 默认值。连续的空白符会被折叠成一个空格。文本会在必要时自动换行。 - **pre**: 类似于 `<pre>` 标签的行为。保留所有的空白符,不会折叠它们,并且只在遇到换行符或 `<br>` 标签时才换行。 - **nowrap**: 连续的空白符会被折叠成一个空格,但是文本永远不会换行,除非使用了 `<wbr>` 或者设置了强制断点。 - **pre-wrap**: 保留所有的空白符,并允许文本在任何位置换行,类似于 `pre` 和 `normal` 的组合行为[^1]。 - **pre-line**: 折叠连续的空白符为单个空格,但在 HTML 文档中存在换行符或 `<br>` 标签的情况下会保持这些换行符的影响[^1]。 #### 使用示例 以下是不同 `white-space` 设置的效果展示: ```html <div style="white-space:normal;"> This text has multiple spaces. </div> <div style="white-space:pre;"> This text preserves all spaces. </div> <div style="white-space:pre-wrap;"> This text wraps at word boundaries while preserving spaces. </div> <div style="white-space:pre-line;"> This text folds consecutive spaces but keeps line breaks. </div> ``` 对于属性值的选择,推荐遵循最佳实践,即始终使用双引号而不是单引号来定义属性值[^2]。这不仅提高了代码的一致性和可读性,还减少了潜在的语法错误风险。 另外需要注意的是,在 CSS 文件中如果出现了伪注释或其他不合法语句,则可能会影响整个文件的加载逻辑。例如在一个序列化的 `@import` 规则之前放置了一个非法的伪注释,那么该伪注释后的所有 `@import` 都将失效[^3]。 ### 总结 通过合理设置 `white-space` 属性可以精确地控制页面上的文字布局方式,从而满足不同的设计需求。无论是简单的段落还是复杂的表格数据呈现都可以找到合适的解决方案。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值