使用css修改div里面文字的字间距

在CSS中,可以使用 letter-spacing 属性来修改 div 元素内文字的字间距。letter-spacing 属性允许你指定字符之间的间距,可以设置为正常间距、更紧或更宽的间距。

  • normal:默认值,字符之间的标准间距。
  • length:指定字符之间的间距,可以是 px(像素)、em(相对于元素的字体大小)等。正值增加间距,负值减少间距。

示例 1: 正常字间距

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Letter Spacing Example</title>
    <style>
        .normal-spacing {
            letter-spacing: normal; /* 默认值 */
        }
    </style>
</head>
<body>
    <div class="normal-spacing">
        这是正常字间距的文字。
    </div>
</body>
</html>

示例 2: 紧字间距

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Letter Spacing Example</title>
    <style>
        .tight-spacing {
            letter-spacing: -0.05em; /* 负值使字符更紧凑 */
        }
    </style>
</head>
<body>
    <div class="tight-spacing">
        这是紧字间距的文字。
    </div>
</body>
</html>

示例 3: 宽字间距

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Letter Spacing Example</title>
    <style>
        .wide-spacing {
            letter-spacing: 0.1em; /* 正值使字符间距更宽 */
        }
    </style>
</head>
<body>
    <div class="wide-spacing">
        这是宽字间距的文字。
    </div>
</body>
</html>
相关推荐
黑云压城After3 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务4 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友5 小时前
什么是断言?
前端·后端·安全
FIN66686 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4956 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1246 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树6 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66686 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER6 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰6 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js