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

问题描述 投票：0回答：4

如何自动更改字母之间的间距。我希望文本占据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>
html css
4个回答
11
投票

编辑：不幸的是，这只会改变word间距，而不是letter间距。 CSS 中没有办法进行字距调整。不过，可能是 CSS3。

这可以通过 

text-align: justify
CSS 属性轻松完成：

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

没有办法纯粹用 CSS 来做到这一点。 

letter-spacing
属性不采用百分比值。 
text-align: justify
也不起作用，因为它只影响单词之间的间距，而不影响字体字距调整，并且它也只适用于后面跟着另一行的文本行。

您可以尝试使用 JS 来完成此操作，方法是计算特定 

div
中的字符数，然后计算字符之间所需的空间，以便填充宽度，但此解决方案仅适用于等宽字体（所有字符具有相同宽度的字体）。

0
投票

如果您每行有 1 个单词，并且希望它们对齐，因为不可能使用字母空间，您可以使用等宽字体系列，例如 Roboto_Mono，这样您将达到所需的结果。

-2
投票

这里有一个解决方案并不适合所有人，但事实证明它为我解决了问题：如果您显示少量的标题文本，您可以在每个单词的每个字符之间放置一个空格“L i k e th is”。

对于我的特定设计，这恰好看起来不错，当然它允许 

align: justify
在 div 中充分发挥其魔力。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.