1

次のcssを持つ段落要素にテキストのブロックがあります:

p {
    text-align: justify;
    text-align-last: left;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

ここにテキストがあります：

DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over a decade of field experience DRG is uniquely positioned to help customers succeed in today’s operational and fiscal environment.

結果は次のようになります。

ここに画像の説明を入力

私が嫌いなのは、「今日の運用と財政」の線の間隔です。「a」を 1 行下に移動し、「help」を 1 行下に移動して、単語の密度を広げたいと考えています。

<br />問題: 「a」という単語と「help」という単語の前にa を追加すると、次のようになります。

ここに画像の説明を入力

これで、テキスト ブロックの左端が平らになりません。

質問：

テキスト ブロックのサイズを調整せずに単語を強制的に次の行に配置するにはどうすればよいですか?

4

3 に答える 3

1

ブラウザは、微調整されたタイポグラフィではがらくたです。完全な両端揃えは、テキストをユーザーにとって読みにくくするため、一般的には避ける必要があります。

ブラウザーやオペレーティング システムが異なれば、テキストのレンダリングもわずかに異なります。自分で修理して、他の場所でブレーキをかけることになるかもしれません。これを細かく管理しようとしても無駄です。

参照: http://nedbatchelder.com/blog/200806/bad_web_typography_full_justify.html

于 2013-08-14T19:31:18.353 に答える
1

Jongware のコメントに基づいて解決策を見つけました。

使用し (word at end of one line)<nobr>&nbsp;(word at start of next line)ました。

2 つの単語をくっつけて、両方の単語を 2 行目に追加しました。見栄えがします。

于 2013-08-14T19:49:38.653 に答える
1

より良い解決策は、複数の要素を使用することです。改行が必要な場所を取り、それらのセクションを個々のセクションに分割します。

それらが別々のセクションになると、それらがすべて 1 つの要素のように見えるように列に表示できます。

変更されていないテキスト:

p { 
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.text {
  width: 400px;
  text-align: justify;
  text-align-last: left;
}
<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over a decade of field experience DRG is uniquely positioned to help customers succeed in today’s operational and fiscal environment.</p>

改行の使用:

p { 
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.text {
  width: 400px;
  text-align: justify;
  text-align-last: left;
}
<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over <br/>a decade of field experience DRG is uniquely positioned to <br/>help customers succeed in today’s operational and fiscal environment.</p>

別々のセクションを使用する:

p { 
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.text {
  width: 400px;
  text-align: justify;
  text-align-last: justify; /* not really the last line */
}
/* The last line of the last p, should use left alignment */
.text.last {
  text-align-last: left;
}
<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over</p><p class="text">a decade of field experience DRG is uniquely positioned to </p><p class="text last">help customers succeed in today’s operational and fiscal environment.

于 2017-04-13T18:50:13.333 に答える