如何在JavaScript中设置文本中单词之间的间距？

在这篇文章中，我们将学习如何在JavaScript中设置文本中单词之间的间距。

单词间距在网站上至关重要，因为它提高了页面上显示文本的可读性和易读性。您可以使用正确的单词间距来生成美观且易于阅读的字体。

在JavaScript中，我们使用`wordSpacing`属性来设置网站上显示文本中单词之间的间距。

使用`style`的`wordSpacing`属性

此JavaScript DOM属性用于获取和设置文本中单词之间的间距。

根据您的需要，您可以将`wordSpacing`属性的值设置为正值或负值。例如，根据您的需要，您可以将单词之间的间距设置为50像素或-50像素。

与Web浏览器的兼容性

此JavaScript属性与浏览器兼容，包括Google Chrome、Safari、Internet Explorer、Opera、Chromium和Mozilla Firefox。

语法

要在您的文本中实现此JavaScript属性，您应该遵循以下语法：

object.style.wordSpacing = "normal | length | initial | inherit"

参数

  • normal - 这是单词之间间距的默认值。使用时，它返回正常间距的单词。
  • length - 指定单词之间的间距。长度值可以为正值或负值。
  • initial - 此值将属性设置为其默认值。
  • inherit - 此值用于从其父元素继承属性。

示例

在这个例子中，我们将使用`wordSpacing`属性来设置单词之间的间距。我们将把单词间距设置为50像素。

<html>
<head>
<style>
   #myText {
      font-family: sans-serif;
      font-weight: normal;
      font-size: 18px;
   }
</style>
</head>
<body>
   <h3> Setting the Spacing between words in a text in JavaScript using
   <i> wordSpacing </i> Property </h3>
   <p id="myText"> Some placeholder material for this multi-collapse
   example's initial collapse component. </p>
   <script>
      var output = document.getElementById("myText").style.wordSpacing="50px";
   </script>
</body>
</html>

示例2

在这个例子中，我们将单词间距的长度设置为负值。我们将值设置为-30像素。

<html>
<head>
<style>
   #myText {
      font-family: sans-serif;
      font-weight: normal;
      font-size: 18px;
   }
</style>
</head>
<body>
   <h3> Setting the Spacing between words in a text in JavaScript using
   <i> wordSpacing </i> Property </h3>
   <p id="myText"> Some placeholder material for this multi-collapse
   example's initial collapse component. </p>
   <script>
      var output=document.getElementById("myText").style.wordSpacing="-30px";
   </script>
</body>
</html>

示例3

在这个例子中，我们将单词间距值设置为normal。

<html>
<head>
<style>
   #myText {
      font-family: sans-serif;
      font-weight: normal;
      font-size: 18px;
   }
</style>
</head>
<body>
   <h3> Setting the Spacing between words in a text in JavaScript using
   <i> wordSpacing </i> Property </h3>
   <p id="myText"> Some placeholder material for this multi-collapse
   example's initial collapse component. </p>
   <script>
      var output=document.getElementById("myText").style.wordSpacing=normal;
   </script>
</body>
</html>

本文教我们如何使用JavaScript的`wordSpacing`属性来设置文本中单词之间的间距。使用此属性，您可以为单词间距的长度指定负值、正值或normal值。

更新于：2022年11月22日

4K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告