使用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>
相关推荐
Mike_jia4 分钟前
Dumbterm:基于网页的终端革命!随时随地安全访问服务器的终极方案
前端
看今朝·4 分钟前
【Dash框架】Dash回调函数中Output的属性详解
java·前端·dash
Data_Adventure5 分钟前
文件Base64转换工具升级:从图片到多格式文件的全新体验
前端
D11_7 分钟前
【React】验证码图片管理系统
前端
掘金安东尼31 分钟前
Caddyfile:用最简单的方式配置最现代的 Web 服务器
运维·服务器·前端
菠萝+冰43 分钟前
React-Window 虚拟化滚动
前端·react.js·前端框架
皓月Code1 小时前
第三章、React项目国际化介绍(`react-i18next`)
前端·javascript·react.js·1024程序员节
云中雾丽1 小时前
react中 所有给 children 传值的方式
前端
加蓓努力我先飞1 小时前
Vue3小兔鲜-(二)
前端·javascript·css·vue3
豆苗学前端1 小时前
企业级用户登录Token存储最佳实践,吊打面试官
前端·javascript·后端