Question

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

我需要实现这个目标：

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

“是”应该完全与上面的“just”一词对齐

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

（1）将是解决方案，但对我不起作用，似乎已被弃用：

xts

（在两行中添加引号“t1”也不会使它工作。）

（2）第一行的负缩进：

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

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

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

Answer 1

您可以使用脏::before hacks：

执行此操作

＆＃13;

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: " »";
}

＆＃13;

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

＆＃13;

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

Answer 2

像这样：http://codepen.io/anon/pen/GZLMjG

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

（我的codepen中的周围DIV不是必需的，只是为了让它看起来更漂亮。）

P.S。：我在第一个文本部分的末尾放了一个 来保留该单词之后的空格。

Answer 3

您可以将完整对齐的文字放在inline-block元素中，然后将其vertical-align:text-top;。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

这两个值的defined不同，但我没有解释为什么Chrome以相同的方式渲染它们而Firefox却没有：

热门：   将元素的顶部及其后代与顶部对齐   整条线。

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

Answer 4

灵活且最简单的方法是使用before伪，但是如果你需要动态制作它，你可以使用一些JS代码完成它，用position relative设置段落样式并将你的前一个文本放在span中在它内部并给它position absolute，然后根据它的宽度给它left位置，所以如果span width = 50那么左边的位置将是-50而一些px在它和段落之间留出空间{ {3}}

$(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>

在html中对齐单词

4 个答案: