web-dev-qa-db-ja.com

divの最後の行を正当化しますか？

「なぜ？」とは思わないこの質問の重要な...しかし、私がする必要があるのはtext-align:justify[〜＃〜] div [〜＃〜]からのテキストの最後の行。通常、divの最後の行（または他の行がない場合は最初の行）は位置合わせされず、左に揃えられます。私はそれがまったく意味をなさないかもしれないことを知っています、しかし私は絶対に正当化される最後の行が必要です！

cssjustifytext-align
38
JCOC611

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/

78
Kristin

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

IE8、Firefox、Chrome、Opera、Safariでサンプルをテストしました。

IE7は:after擬似クラスを実装していないため、そこでは動作しません。

IE7のサポートが必要な場合は、spanの最後にある余分なdivの中に" ___"を貼り付けるとおそらく動作します（JSを使用しますか？）。

Live Demo （ コードを参照 ）

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>

残念ながら、divを必要以上の高さにするようです。

11
thirtydot

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

このトリックは「Ben Justification」と呼ばれます *

まあ、それはCSSですべてではありません、あなたは行の終わりに少し余分を追加する必要があります。上記の見出しのマークアップは...

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

行の最後に少し追加するだけで、新しい行を開始して行の正当化がトリガーされます。追加コンテンツ（<span> &nbsp;</span>）は、スペースが1000ピクセル幅（ワード間隔で）になり、&nbsp;はWordのように扱われます。 fontsizeが0pxに設定されているため、追加の行は表示されません。

更新、2011年1月23日：スパン内のafterの後にスペースを含めるようにマークアップを更新し、スパンのフォントサイズを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

9
Jacqui

CSS3は、このソリューションをtext-align-lastの形式で提供します。 http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-lastを参照

5
kander

「何らかの理由で」（かなり良い理由が1つある）divを1行しか使用できないという作業をしているとしましょう。

なぜtext-align: justify;？ すべての行を正当化します。 1行しかない場合でも。

Edit：scragzが言ったように this を探していると思います。とにかく、これはIE 5.5およびIE 6。

1
Donovan

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

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

あります CSS3 IE 5.5/6（ありがとう、 CSS3.com 、NOT！）プロパティと呼ばれる text-justify それはあなたが望むことをすることができます：

text-justify: distribute-all-lines;

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

1
scragz

！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つの欠点があります。1行のテキストのみで機能し、上記のようにコンテンツを変更する必要がありますが、これは常に実行可能であるとは限りません。しかし、これが問題ではない場合もあります（私の場合のように）。余分なスペースを挿入する位置を制御できると便利です。もちろん、スタイルは簡潔さのためだけにインラインになっています。最近のFFox/IEのみでテストしました。

0
robert4

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

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

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

0
abvgd