zoukankan      html  css  js  c++  java
  • 段落排版--中文字间距、字母间距(letter-spacing, word-spacing)

    中文字间隔、字母间隔设置:

    如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing 来实现,如下面代码:

    h1{
        letter-spacing:50px;
    }
    ...
    <h1>了不起的盖茨比</h1>

    注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。

    单词间距设置

    如果我想设置英文单词之间的间距呢?可以使用 word-spacing 来实现。如下代码:

    h1{
        word-spacing:50px;
    }
    ...
    <h1>welcome to here!</h1>

    示例:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>字间距</title>
    <style type="text/css">
        h1{letter-spacing:20px;font-size:20px;}
        p{word-spacing:20px;}
        #pp{letter-spacing:20px;
    </style>
    </head>
    <body>
        <h1>hello world, hello rinpe !</h1>
        <hr/>
        <p>hello world, hello rinpe !</p>
        <hr/>
        <p id="pp">我的名字叫xxxxx</p>
    </body>
    </html>

    效果:

  • 相关阅读:
    8. Java 异常
    9. GUI编程
    生成验证码
    使用response实现文件的下载
    关于小程序的几个坑
    关于redux应用
    关于修改react的启动端口
    react 坑总结
    关于小程序的一些坑的总结
    微信开发者工具 跨域问题
  • 原文地址:https://www.cnblogs.com/Rinpe/p/5544429.html
Copyright © 2011-2022 走看看