如何使跨越多行的文本在 CSS 中每个字母垂直对齐？答案

【问题标题】：How do I make text spanning multiple lines each have each letter vertically aligned in CSS?如何使跨越多行的文本在 CSS 中每个字母垂直对齐？
【发布时间】：2021-12-04 00:11:42
【问题描述】：

如何使文本跨越多行，让每个字母在 CSS 中垂直对齐？

我使用 CSS 设置了以下内容。

word-spacing: 0px;
padding: 0px;
letter-spacing: 24px;

我认为发生错位是因为我没有使用等宽字体。

有没有办法强制字体中的所有字符宽度相同以使事情变得更容易？所有这些都可以在跨越多行时垂直对齐？

You can try out the code here.

为了将来参考，我复制了下面的代码。

HTML

<div class="gridpaperfocus">
    <p>paragraph one</p>

    <p>paragraph two</p>
</div>

CSS

body {
  font-family: Tahoma;
}

.gridpaperfocus {
    background-image: url('https://i.imgur.com/HezKKmn.png');
    background-color: #dcdcdc;
    /* font-weight: bold; */
    /* max-height: 100px; */
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    border-style: double;
    margin: 16px;
    /* color: rgb(255, 153, 51); */
    color: #3c3c3c;
    padding: 0px 30px;
    /* padding: 0px; */
    word-spacing: 0px;
    margin-left: 32px;
    letter-spacing: 24px;
    line-height: 30px;
    display: block;
    width: 90%;
}


.gridpaperfocus p {
    margin: 0px;
    margin-top:  0px;
    margin-bottom: 30px; /* 42px with gridpaperback.png */
}
.gridpaperfocus p:last-of-type { margin-bottom: 0px; }

【问题讨论】：

提供一些代码。
@disinfor 我已经添加了带有 jsfiddle 链接的代码。

标签： css webfonts

【解决方案1】：

如果无法使用等宽字体，那么一种方法是将每个字符包装在一个 span 元素中，并强制它具有固定宽度，并且字符在其中居中。

不是很优雅，您希望使用一些预处理而不是手动进行 - 可以在 Javascript 中相当简单地完成。

这是一个简单的 sn-p，有几个宽字符和一个窄字符来展示这个想法：

span {
  width: 24px;
  display: inline-block;
  text-align: center;
}

&lt;span&gt;A&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;i&lt;/span&gt;&lt;br&gt;&lt;span&gt;i&lt;/span&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;X&lt;/span&gt;

【讨论】：

我已经成功上传了一个代码示例。你能看看你是否可以使用我的 jsfiddle 链接让它工作吗？ jsfiddle.net/desbest/ws5oh1Lc/1
您需要编写一些 Javascript 来在每个字符周围放置一个 span 元素（包括任何空格或标点符号）
谢谢。我现在已经开始工作了。我必须在 span 标签中添加 margin-left: 和 max-width:。 jsfiddle.net/desbest/73e2tq5a