41

「なぜ？」とは思いません。この質問の重要性は...しかし、私がする必要があるのは、 DIVtext-align:justifyからのテキストの最後の行です。通常、divの最後の行（または他の行がない場合は最初の行（現在の場合））は揃えられませんが、左揃えになります。まったく意味がないかもしれませんが、最後の行を正当化する必要があります。

4

9 に答える 9

82

これは、IE6+ で動作するクロスブラウザー メソッドです。

text-align-last: justify; を組み合わせます。これは、IE および :after 疑似コンテンツ メソッドのバリエーションでサポートされています。1 行のテキスト要素の後に追加された余分なスペースを削除するための修正が含まれています。

CSS:

p, h1{
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

テキストが 1 行の場合は、これを使用して、上記の CSS によって空白行が発生するのを防ぎます。

h1{
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

詳細: http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/

于 2011-07-09T20:54:40.750 に答える
11

これは、私が思いついた/見つけた最もクリーンなハックです。あなたのマイレージは異なる場合があります。

例を IE8、Firefox、Chrome、Opera、Safari でテストしました。

:afterIE7 は疑似クラスを実装していないため、IE7 では機能しません。

IE7 のサポートが必要な場合は、 (JS を使用しますか?)最後に" ___"不要なものを内部に挿入するとうまくいくでしょう。spandiv

ライブデモ(コードを参照)

CSS:

div {
    width: 618px;        
    text-align: justify
}
div:after {
    content: " __________________________________________________________";
    line-height: 0;
    visibility: hidden
}

HTML:

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dui dolor, bibendum quis accumsan porttitor, fringilla sed libero. Phasellus felis ante, egestas at adipiscing lobortis, lobortis id mi. Praesent pulvinar dictum purus. Duis rhoncus bibendum vehicula. Vestibulum mollis, metus a consectetur semper, urna enim sollicitudin lacus, vel imperdiet turpis nisl at metus. Integer iaculis pretium dui, a viverra dolor lobortis pellentesque. Aliquam quis felis nec purus semper interdum. Nam ac dolor in sem tincidunt egestas. Ut nisl tortor, laoreet eu vestibulum id, bibendum at ipsum. Maecenas elementum bibendum orci, ac eleifend felis tincidunt in. Fusce elementum lacinia feugiat.
</div>

残念ながら、それはdiva ラインを必要以上に高くしているようです。

于 2011-01-23T00:26:05.100 に答える
9

この方法は私のために働いた：

このトリックは「ベン・ジャスティフィケーション」と呼ばれます*

css がすべてというわけではありません。行末に少し余分に追加する必要があります。上記の見出しのマークアップは...

<h1 id="banner">
    How to justify a single line of text with css<span> &nbsp;</span>
</h1>

行末の小さな追加は、新しい行を開始することによって行の正当化を引き起こします。追加コンテンツ ( ) は、スペースが 1000px 幅 (単語間隔あり) になり、単語のように扱われる<span> &nbsp;</span>ため、強制的に改行されます。&nbsp;フォントサイズが 0px に設定されているため、追加の行は表示されません。

更新、2011 年 1 月 23 日: マークアップを更新して、スパン内の の後にスペースを含め、スパンのフォント サイズを 1px に設定しました。これは IE8 に必要です。IE の問題を指摘してくれた Mamoun Gadir に感謝します。

上記の見出しのcssは...

h1#banner {
border: 1px solid #666;
display: block;
width: 100%;
height: 1em;
font-size: 1em;
line-height: 1em;
margin: 20px auto;
padding: 0px ;
text-align: justify ;
}

h1#banner span {
font-size: 1px ;
word-spacing: 1000px;
}

*この手法が以前に公開されたことを示す証拠がない限り、私はここにこの手法を「Ben Justification」と名付け、すべての人が自由に使用できることを宣言します。

ベン・クレイ、2010 年 1 月。

ソース: http://www.evolutioncomputing.co.uk/technical-1001.html

于 2011-06-15T16:23:44.237 に答える
5

CSS3は、このためのソリューションを次の形式で提供します。http：//www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-lasttext-align-lastを参照してください。

于 2011-01-22T23:30:06.753 に答える
1

CSS3 IE 5.5 / 6（ありがとう、CSS3.com、NOT！）というプロパティがありtext-justify、これを使用して必要な処理を実行できます。

text-justify: distribute-all-lines;

ブラウザのサポートについてはよくわかりません。なんてこった。

于 2011-01-22T23:29:58.027 に答える
1

上記の回答の一部が機能するという問題がありましたが、ボックスの背景色があったため、下部に目に見える新しい行が追加されました。これは受け入れられませんでした。以下のコードで正当化を修正しました。

jQuery:

$(".justify").each(function(index, element) {
    var original_height = $(this).height();
    $(this).append("<span style='display: inline-block;visibility: hidden;width:100%;'></span>");
    $(this).height(original_height);
});

HTML:

<div class="justify" style="width:100px; background-color:#CCC">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
于 2012-07-13T14:26:02.250 に答える
1

「何らかの理由で」（かなりの理由が1つあります）1行しか持てないdivを扱っているとしましょう....そしてそれらを正当化したいと思います。

なぜあなたは使わないのですtext-align: justify;か？それはすべての行を正当化します。たった1行でも構いません。

編集： scragzが言ったように、あなたはこれを探していると思います。とにかく、これは IE 5.5 と IE 6 でのみ動作します。

于 2011-01-22T23:43:19.003 に答える
0

!DOCTYPE が HTML5 の場合、Kristin と Jacqui のソリューションでは余分な改行が発生し、これを削除するのは困難です。それが気になるなら (私のように)、ここにさらに別のアイデアがあります:

<div style="display: flex;">
  Lorem <span style="flex:1;"></span>
  ipsum <span style="flex:1;"></span>
  dolor <span style="flex:1;"></span>
  sit...
</div>

別の欠点があります: 1 行のテキストでのみ機能し、上記のようにコンテンツを変更する必要があり、常に実現可能/実用的であるとは限りません。しかし、これが問題にならない状況もあります (私の場合のように)。余分なスペースが挿入される位置を制御できると便利です。もちろん、スタイルは簡潔にするためにインラインになっています。最近のFFox/IEのみでテストしました。

于 2014-06-27T10:39:34.433 に答える
0

終了 div タグの後に改行が続く場合、または div タグが同等の下部パディング/マージンを使用する場合、これを次のような非改行スペースの非表示の終了行に単純に置き換えることができます。

<div>This last line is now for all intents and purposes justified &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

これは最も美しいソリューションではないかもしれませんが、非標準の微調整に依存していないため、おそらく最も安全なクロスブラウザー ソリューションです。1 行に許容される最大値から安全なマージン内に保ちながら、常に改行を発生させるのに十分な「nbsp」文字があることを確認してください。

なぜこれが必要なのかについては、まあ、誰が興味を持っているかについて、私自身の理論的根拠を示すことができます。画像、表、または私の場合のように改ページの直前にカスタムの脚注を挿入するために、連続したテキスト ブロックまたはテキスト パラグラフを分割したい場合があります。これを行う場合、任意の改行の直後にテキストが再開されるため、改行の直前の最後の行を正当化する必要があります。私の場合、脚注は可変長であるため、手動で入力する必要があるため、テキスト ブロックを手動で分割し、改行前の最後の行を手動で配置する必要があります。クロスブラウザーと互換性のある自動化されたソリューションを認識していませんが、改行しないスペースをたくさん追加すると、少なくとも私にとってはうまくいきます...

于 2014-09-09T03:41:03.503 に答える