css ===== word-spacing

最新推荐文章于 2024-09-16 23:33:40 发布

笑望灬星辰

最新推荐文章于 2024-09-16 23:33:40 发布

阅读量204

点赞数

本文链接：https://blog.csdn.net/hu1628299958/article/details/110358186

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

"本文通过一个示例代码详细介绍了CSS中的word-spacing属性，展示了如何设置元素中单词之间的间距。正常值、长度值和负值的使用方式都有所提及，同时指出在中文环境下该属性无效。示例中比较了不同word-spacing值对"Iamaprogrammer"字符串显示的影响。"

摘要由CSDN通过智能技术生成

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>word-spacing</title>
</head>
    <!-- 
        该属性定义元素中字之间插入多少空白符。
        针对这个属性，“字” 定义为由空白符包围的一个字符串。
        如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。
        允许指定负长度值，这会让字之间挤得更紧。
     -->
     <style>
         /*  
            word-spacing  中文无效
            normal	默认。定义单词间的标准空间。 0px  默认值与浏览器差异有关
            length	定义单词间的固定空间。
            inherit	规定应该从父元素继承 word-spacing 属性的值。
          */
        body{
            padding: 50px
        }
        p{
            word-spacing: 20px
        }
        .ws10{
            word-spacing: 0px
        }
        .ws-normal{
            word-spacing: normal;
        }
     </style>
<body>
    <p>
        该属性定义元素中字之间插入多少空白符。中文无效
    </p>
    <p>I am a programmer</p>
    <div class="ws10">I am a programmer</div>
    <div class="ws-normal">I am a programmer</div>
</body>
</html>