在html中对齐单词

Question

[HTML]
使用非等宽字体时,对齐单词的最简单的解决方案(最少量的代码)是什么？

我需要实现这个目标:

 « ... Just some random text. This
       is just some random text.
       This is just some random
       text. This is just random. »

"is"应该与上面的"just"一词完全一致

 
到目前为止我尝试了什么:

(1)将是解决方案,但对我不起作用,似乎已被弃用:

text text text text <tab id=t1>target text<br>
<tab to=t1>Should be aligned with target.

(在两行中添加"t1"的引号也不会使它工作.)

(2)第一行的负缩进:

text-indent: -3em;

这是有效的,但它不是一个确切的方法,因为我必须在视觉上调整em编号以使对齐匹配.另外:根据用户的字体和大小等,对齐不一定与用户匹配.

找不到简单问题的解决方案让我发疯:(

Answer 1

你可以用肮脏的::before黑客来做到这一点：

\n\n

\r\n

\r\n

span.aligned {\r\n  font-family: sans-serif;\r\n  display: block;\r\n  white-space: pre;\r\n  position: relative;\r\n  margin-left: 30px;\r\n}\r\n\r\nspan.aligned::before {\r\n  content: "\xc2\xab ...";\r\n  position: absolute;\r\n  left: -30px;\r\n}\r\n\r\nspan.aligned::after {\r\n  content: " \xc2\xbb";\r\n}

\r\n

<span class="aligned">Just some random text. This\r\nis just some random text.\r\nThis is just some random\r\ntext. This is just random.</span>

\r\n

\r\n

\r\n

\n\n

它要求您对 和 内容之间所需的空间进行硬编码< ...，但除了这些小细节之外，它非常灵活。

\n