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>

    效果:

  • 相关阅读:
    springboot 基础
    spring 基础
    spring MVC 基础
    windows shell
    oracle 创建用户和视图并授权
    maven 安装本地依赖
    JAVA ssl 证书
    mybatis 递归
    MyBatis基础
    当年的毕设-cpf (一个简易的协议 fuzzer)
  • 原文地址:https://www.cnblogs.com/Rinpe/p/5544429.html
Copyright © 2011-2022 走看看