Question

如何自动更改字母之间的空格。我希望文本占据div的整个宽度。文字不是静态的。（始终更改文本，可以是123“或”文本文本“...）

  <style type="text/css">
    #menu{
      width: 200px;
      background-color: #000;
      color: #336699;
      font-size: 16px;
      letter-spacing: 100%;
    }
  </style>
<body>
<div id="menu">
  tekstas
</div>

Answer 1

编辑：不幸的是，这只会更改字间距，而不是字母间距。在CSS中无法进行字距调整。但可能是CSS3。

使用text-align: justify CSS属性

可轻松完成此操作

#menu 
{ 
      width: 200px; 
      background-color: #000; 
      color: #336699; 
      font-size: 16px; 
      text-align: justify; 
}

Answer 2

没有办法纯粹使用CSS。 letter-spacing属性不会占用百分比值。 text-align: justify不起作用，因为它只影响单词之间的空格，而不影响字体字距，它也只适用于那些后面跟着另一行的文本行。

您可以尝试使用JS通过计算特定div中的字符数来执行此操作，然后计算字符之间所需的空间，以便填充宽度，但此解决方案只适用于单倍间距字体（所有字符的宽度相同的字体）。

Answer 3

这里的解决方案对每个人都不起作用，但结果却为我解决了问题：如果你要显示少量的标题文字，你可以在每个单词的每个字符之间放一个空格＆＃ 34; L ikethi s＆＃34;。

对于我的特定设计，这看起来很好看，当然它允许align: justify在div中完全发挥其魔力。

CSS，用文本填充所有div宽度

3 个答案: