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

Question

如何使文本跨越多行，使每个字母在 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; }

Answer 1

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

不是很优雅，您希望使用一些预处理而不是手动进行 - 可以在 Javascript.

中相当简单地完成

这是一个简单的片段，其中包含几个宽字符和一个窄字符来展示这个想法：

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

<span>A</span><span> </span><span>i</span><br><span>i</span><span>A</span><span>X</span>

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

How do I make text spanning multiple lines each have each letter vertically aligned in CSS?

css

webfonts