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

このように: http://codepen.io/anon/pen/GZLMjG

2 つの DIV を使用します。float両方ともです。左側にあるはずのテキストを最初の DIV に入れ、残りを 2 番目の DIV に入れます。タグを使用して、2 番目の DIV で改行を取得します。leftwidth: auto;<br>

(コードペンの周りの DIV は必要ありません。見栄えを良くするためだけです。)

PS:&nbsp;最初のテキスト部分の最後に a を付けて、その単語の後のスペースを確保しました。

于 2016-05-13T21:29:29.473 に答える
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 に答える
0

柔軟で最も簡単な方法はbefore疑似を使用することですが、動的に作成する必要がある場合は、小さなJSコードでそれを達成し、段落をスタイルしposition relative、前のテキストをその中のスパンに入れて、それに基づいて位置をposition absolute与えることができますleft幅、したがって、スパン幅 = 50 の場合、左の位置は -50 になり、それと段落の間にスペースを空けるためにいくつかの px になります 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 に答える