使用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>
相关推荐
言兴几秒前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte4 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常5 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常7 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101811 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28118 分钟前
Chrome插件开发
前端
前端 贾公子30 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#