dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1393|回复: 0

[Html/Css] 如何给HTML页面的文本设置字符和单词间距

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3987

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3987

    发表于 2020-4-16 08:00:00 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    设置字符和单词间距介绍属性名单位描述
    letter-spacingpx设置字符间距
    word-spacingpx设置单词间距
    letter-spacing设置字符间距#
    • letter-spacing属性原理是:根据要设置的文本每一个字符之间的间距。
    • 让我们进入letter-spacing属性的实践,实践内容如:将HTML页面中的p标签中的文本每一个字符间距设置为50px。
    • 代码块
    • [HTML] 纯文本查看 复制代码
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>设置字符和单词距离</title>
          <style>
              p{
                  letter-spacing: 50px;
              }
          </style>
      </head>
      <body>
          <p>成功不是打败别人,而是改变自己。</p>
      </body>
      </html>

    结果图


                                               1.png

    word-spacing设置单词间距#
    • word-spacing属性原理是:根据要设置的文本,以空格为核心设置间距,主要用于在英文的网站中,笔者使用中文是为了让读者更好的理解word-spacing属性的原理。
    • 让我们进入letter-spacing属性的实践,实践内容如:将HTML页面中的p标签中的每一个以空格之间的间距设置为30px。
    • 代码块
    • [HTML] 纯文本查看 复制代码
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>设置字符和单词距离</title>
          <style>
              p{
                  word-spacing: 30px;
              }
          </style>
      </head>
      <body>
          <p>成功 不是 打败 别人,而是改变自己。</p>
      </body>
      </html>




    结果图
                          3.png








    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-12-23 12:00 , Processed in 0.076421 second(s), 36 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表