有没有根据 div 宽度自动设置字母间距？答案

【问题标题】：Is there anyway to set the letter-spacing automatic based on the div width?有没有根据 div 宽度自动设置字母间距？
【发布时间】：2013-01-16 04:51:59
【问题描述】：

我有一个流畅的网站，我计划在<div> 中放置一些文本。这个想法是

<div>FIRST LINE TEXT HERE</div>
<div>THE SECOND LINE TEXT HERE. BUT QUITE LENGTHY</div>
<div>THIRD LINE IS HERE. NOT THAT MUCH LENGTH<div>

我需要通过根据内部内容动态添加字母间距并在<div> 宽度之外使用来显示所有三行以使其看起来像一个合理的字母。

【问题讨论】：

这是重复的，这里有一个解决方案：stackoverflow.com/questions/5530375/…

标签： javascript css

【解决方案1】：

您可以在 JavaScript 中计算文本的宽度，然后计算所需的字母间距，并添加它。请注意，这会将单词空间视为任何其他字符，因此添加的间距越大，单词之间的距离就越近。结果在其他方面也会有印刷问题：如果字母间距过大，单词看起来就不好看。

如果只需要一点间距，通常最好添加 word 间距，对于某些浏览器（不是 Chrome），您可以使用 text-align-last: justify 这样做。您可以考虑另外使用text-justify: newspaper，因为它可能会在字母之间添加部分间距，而不仅仅是在单词之间。见jsfiddle。

【讨论】：

Chrome 和 Firefox。甚至是 JSFiddle。
在 Internet Explorer 中检查。没关系！！
正如我所写，text-align-last 在 Chrome 上不起作用。在 Firefox 上，它从版本 12 开始工作。
除了使用 Jquery 的 CSS 之外，还有什么跨浏览器解决方案吗？

【解决方案2】：

我建议你试试这个..为这些行指定三个不同的类，即 first_line、second_line 和类似的 third_line

然后为类编写 css。对于 first_line，您将字母间距保持在您想要的范围内。同样，您也可以为其他两行指定字母间距。

【讨论】：

这个想法只适用于固定宽度的外部<div>。该任务是针对流体布局的。外层<div>的宽度是根据屏幕分辨率动态变化的。