对齐html中的单词

Question

[HTML]
当使用非单空格字体时，对齐单词最简单的解决方案（最少的代码量）是什么？

我需要做到这一点：

«。。。只是一些随意的文字。这只是一些随机的文本。这只是一些随机的文本这只是随机的。»

"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黑客来做到这一点：

span.aligned {
  font-family: sans-serif;
  display: block;
  white-space: pre;
  position: relative;
  margin-left: 30px;
}
span.aligned::before {
  content: "« ...";
  position: absolute;
  left: -30px;
}
span.aligned::after {
  content: " »";
}

<span class="aligned">Just some random text. This
is just some random text.
This is just some random
text. This is just random.</span>

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

Answer 2

如下所示：http://codepen.io/anon/pen/GZLMjG

使用两个DIV，float它们都是left和width: auto;。将应该在左侧的文本放入第一个DIV，其余的放入第二个DIV。使用<br>标签获取第二个DIV.中的换行符

（我的代码笔中没有必要使用周围的DIV，这只是为了让它看起来更好。）

第页。S.：我在第一个文本部分的末尾放了一个 ，以保留该单词后面的空格。

Answer 3

您可以将整个对齐的文本放在inline-block元素中，并赋予它vertical-align:text-top;。

span.pre {
   display: inline-block;
   vertical-align: text-top;
 }

<p>« ... just <span class="pre">some random text. This<br>
is just some random text.<br>
This is just some random<br>
text. This is just random. »</span> 
</p>

编辑：在Firefox中，vertical-align:top;似乎对我有效。

span.pre {
       display: inline-block;
       vertical-align: top;
     }

<p>« ... just <span class="pre">some random text. This<br>
    is just some random text.<br>
    This is just some random<br>
    text. This is just random. »</span> 
    </p>

这两个值的定义不同，但我无法解释为什么Chrome以相同的方式渲染它们，而Firefox则不然：

顶部：将元素及其子体的顶部与整条线路。

text top：将元素的顶部与父元素的顶部对齐元素的字体。

Answer 4

灵活而简单的方法是使用before pseudo，但如果你需要动态地制作它，你可以用一点JS代码来实现这一点，用position relative为段落设置样式，并将前面的文本放在其中的span中，给它position absolute，然后根据它的宽度给它的left位置，因此，如果span width＝50，那么左边的位置将是-50，并在它和段落之间留出一些pxhttps://jsfiddle.net/qhdxedxo/

$(document).ready(function () {
  var cont            = $('.cont');
  var contWidth       = $('.cont').width();
  var before          = $('.before');
  var beforeWidth     = before.width();
  var paragraph       = cont.find('p');
  cont.css({
    paddingLeft: beforeWidth
  });
  before.css({
    left: - beforeWidth - 5
  });
});

.cont {
  padding-left: 50px;
  padding-top: 20px;
  width: 300px;
  height: 400px;
  background-color: #eee;
}
p {
  display: block;
  position: relative;
  background-color: #eee;
  width: 80%;
  float: right
}
.before {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="cont">
  <p>
    <span class="before">« ...</span>
    Just some random text. This
    is just some random text.
    This is just some random
    text. This is just random
    is just some random
    text. This is just random. »</p>
</div>