CSS文本与字母间距对齐

有没有一种方法可以使用CSS，将每行中的字母间距自动调整为定义的宽度

例如，“像这样的东西”看起来是这样的：

---

有没有一种非突兀的方式将这种样式应用于我的文本？我相信纯CSS没有这个选项（至少在3之前的CSS版本中没有，CSS3似乎有一个

text justify

属性，但它还没有得到很好的支持），所以js解决方案也可以。它并不漂亮，但也许你可以修改它来满足你的需要。（更新以处理大小调整）

函数拆分文本（节点）{
var text=node.nodeValue.replace（/^\s*|\s（？=\s）|\s*$/g，“”；
对于（变量i=0；i

#字符#{
位置：相对位置；
宽度：40%；
边框：1px纯红；
字号：32pt；
保证金：0；
填充：0；
}
#字符*{
保证金：0；
填充：0；
边界：无；
}

像这样的东西

这个

我知道这是一个老话题，但前几天晚上我遇到了这个问题。并使用表格找到了合适的解决方案

每个字母都应该放进一个

我知道这看起来很乏味，但如果你想这样做的话，可能需要一两个字，对吗？或者你总是可以使用JS来填充它，如果它太多的话。然而，这只是CSS和非常通用的解决方案

使用字母间距，字母可以正确分布。你应该根据桌子的宽度来摆弄它

#justify {
  width: 300px;
  letter-spacing: 0.5em;
}

J
U
s
T
我
F
Y

交叉划船安全，几乎没有什么不同。这只是CSS

我用的是英语和西班牙语。

---

我名字下的西班牙语副标题有一个额外的字母，它将跨过宽度。使用上面解释的表格，它会自动分配到相同的宽度。手动设置间距我不得不为每种语言定义一个完整的条件来解决这个问题。

下面是另一个使用我为这个问题编写的jQuery代码片段的方法：

HTML:

什么 喜欢 这 jQuery：

$.fn.strech\u text=函数（）{
var elmt=$（此），
cont_width=elmt.width（），
txt=elmt.html（），
一行=$（''+txt+''），
nb_char=elmt.text（）.length，
间距=连续宽度/nb字符，
宽度；
html（一行）；
txt_width=一行宽度（）；
如果（文本宽度<连续宽度）{
var char\u width=txt\u width/nb\u char，
ltr_间距=间距-字符宽度+（间距-字符宽度）/nb_字符；
one_line.css({
“字母间距”：ltr_间距
});
}否则{
一行内容（）展开（）；
elmt.addClass（'justify'）；
}
};
$（文档）.ready（函数（）{
$（'.stretch'）。每个（函数（）{
$（此）.strech_text（）；
});
});

再说一遍，我知道这确实很旧，但为什么不在每个字母之间留出一个空格，然后文本对齐：justify？然后，每个字母都将被视为一个“单词”，并相应地进行调整。

也需要这样做，因此我将建议的技术捆绑在一个简单易用的jquery插件中，您可以在这里找到：

它在其核心使用相同的过程，并添加了一些选项进行调整。

---

欢迎评论。

处理此问题的另一种方法可能是使用“vw”上浆装置。此单位类型可用于字体大小属性，并表示窗口宽度的百分比

@media only screen and (max-width: 768px) {
    font-size: 2rem;
}

免责声明：这不是您想要的，但不需要脚本。它确实会调整文本大小，但也会缩放到页面的宽度

比如说,

.heading {
  font-size: 4vw;
}

将使当前字体中一个字符的宽度为窗口宽度的4%

如果希望根据窗口的宽度将字体大小锁定为最小大小，则可以使用媒体查询

@media only screen and (max-width: 768px) {
    font-size: 2rem;
}

使用浏览器检查器处理font size属性，并调整该值，使其对应用程序有意义

“大众”单元适用于IE9+、iOS 8.3+和Android 4.4+以及所有其他主流浏览器。我不太担心移动设备的支持，因为您可以使用媒体查询为这些设备设置正确的大小，如上所述

---

Viewport units是一种功能强大的方法，可以用很少的代码缩放站点的许多不同方面。

我刚刚根据table的Tony B方法制作了一个JQuery脚本。 这是JSFIDLE

此脚本创建一个表，其中每个字符位于一行中。这适用于完整的句子。 我不确定这是完全优化的

证明字母间距（“句子”）合理；
函数调整字母间距（divId）{
//目标元素
domWrapper=$（'#'+divId）.clone（）.html（''）；
//构造
$（'#'+divId）.contents（）.each（函数（索引）{
//将div id存储到td子元素类
var tdClass=divId；
//拆分文本
$text
.heading {
  font-size: 4vw;
}

@media only screen and (max-width: 768px) {
    font-size: 2rem;
}