5

[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 编号以使对齐匹配。另外：根据用户的字体和大小等，对齐方式不一定适合用户。

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

4

4 回答 4

2

你可以用肮脏的::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>

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

于 2016-05-13T20:28:17.577 回答
2

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

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

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

PS：我&nbsp;在第一个文本部分的末尾放了一个以保留该单词后的空格。

于 2016-05-13T21:29:29.473 回答
2

您可以将整个对齐的文本放在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>

编辑：在 Firefoxvertical-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 不是：

top： 将元素及其后代的顶部与整行的顶部对齐。

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

于 2016-05-13T22:39:03.617 回答
0

灵活和最简单的方法是使用before伪，但如果你需要动态地制作它，你可以用一点 JS 代码来完成它，用你的段落设置样式position relative并将你的前文本放在 span 里面并给出它position absolute，然后left根据它给出它的位置宽度，因此如果跨度宽度 = 50，则左侧位置将为 -50 和一些像素以在它和段落之间留出空间https://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>

于 2016-05-13T21:21:02.500 回答