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

Question

我有一个流体宽度的网站，我计划在其中放置一些文本<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>。

Answer 1

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

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

Answer 2

我建议你试试这个..给这些线三个不同的类，即 first_line、second_line 和类似的 third_line

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