h5页面加空格常用的几种方法

最新推荐文章于 2023-10-22 18:08:14 发布

原创最新推荐文章于 2023-10-22 18:08:14 发布 · 1.1w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css

本文详细介绍了在HTML和CSS中如何使用不同类型的空白字符和样式属性来控制文本的布局和间距，包括如何在表格中应用不同宽度的空白字符以及如何通过CSS的letter-spacing和word-spacing属性调整字符和单词间的间距。

1.html

<table align="center" border="1px" bordercolor="rgb(46, 45, 45)" width="200px">
    <tr>
        <td>姓名</td>
        <td>姓名</td>
    </tr>
    <tr>
        <!-- 不断行的空白（1个字符宽度） -->
        <td>姓&nbsp;名</td>
        <td>姓&#160;名</td>
    </tr>
    <tr>
        <!-- 半个空白（1个字符宽度） -->
        <td>姓&ensp;名</td>
        <td>姓&#8194;名</td>
    </tr>
    <tr>
        <!-- 一个空白（2个字符宽度） -->
        <td>姓&emsp;名</td>
        <td>姓&#8195;名</td>
    </tr>
    <tr>
        <!-- 一个空白（2个字符宽度） -->
        <td>姓&thinsp;名</td>
        <td>姓&#8201;名</td>
    </tr>
</table>

效果如下：
在这里插入图片描述

2.css


<div style="border:1px solid red; width: 900px;">
    <!-- white-space 属性取值为pre时，浏览器会保留文本中的空格和换行 -->
    <div style="white-space:pre">将      军<div> 
    <!-- letter-spacing 属性用于设置文本中字符之间的间隔 -->
    <div style="letter-spacing:100px;">城南小陌又逢春！</div>
    <!-- word-spacing 属性用于设置文本中单词之间的间隔 -->
    <div style="word-spacing:50px">与你 若 只如初见</div>
</div>