Q&A
ありがとうございました。
Sohaya様のご指摘どおりでした！
###前提・実現したいこと
ホームページを作成中です。
CSSにてレイアウトのデザインをしていますが、改行(<br>)している文字の両端揃えを行いたいと考えています。
よろしくお願いいたします。
###発生している問題
改行さえ入っていなければ、下記のCSSにて両端揃えが可能なことを確認しましたが、
改行が入ると、両端に揃いません・・・。
HTML
1<p id="content_text_1"> 2 あああああああああああああああああああああああああああああああああああああああああああああああああ<br> 3 あああああああああああああああああああああああああああああああああああああああああああ<br> 4 ああああああああああああああああああああああああああああああああああああああああああああああ<br> 5 ああああああああああああ。<br> 6 あああああああああああああああああああああああああああああああああああああああああああああああ<br> 7 ああああああああああ。 8</p>
CSS
1 #content_text_1{ 2 text-align:justify; 3 text-justify: inter-ideograph; 4}
###試したこと
改行(<br>)を外し、CSSが反映する事を確認。
しかし、改行の位置も指定したい。
###補足情報(言語/FW/ツール等のバージョンなど)
HTML5 / CSS3
回答4件
0
ベストアンサー
ご質問内容は「段落p内の最終行もjustifyしたい」でお間違いないでしょうか。
（文字数の少ない行は 字間がかなり空きますが 見ため的に問題ないですか）
その段落には、他から display: inline; のスタイルがかかっていたりはしませんか？
段落の display属性が block inline-block list-item table flexなら
最終行にも text-align-last: justify; は効きますが inline のときは効きませんので
display属性を inline以外に上書きしてみてください。
投稿2019/01/07 18:55
編集2019/01/08 17:23
総合スコア254
0
text-align-last: justify; で両端揃えになると思いますが、以下のコードは両端揃えになりますか？
html
1<p style="text-align-last: justify;"> 2 あああああああああああああああああああああああああああああああああああああああああああああああああ<br> 3 あああああああああああああああああああああああああああああああああああああああああああ<br> 4 ああああああああああああああああああああああああああああああああああああああああああああああ<br> 5 ああああああああああああ。<br> 6 あああああああああああああああああああああああああああああああああああああああああああああああ<br> 7 ああああああああああ。 8</p>
投稿2019/01/07 15:52
総合スコア60
0
初めまして！
テキストがどのような位置にあるのか、(例えばfigure内だったり、div内とか親要素があったり…)
分からないですが
こちらのサイト様を参考にされたのでしょうか？
私はほぼ素人なのでおこがましいですが、サイト様の様にfigure内など横幅が決まって入ればそれに合わせてそろってくれると思います。
codepen保存忘れたので、
これは単純にpタグに横幅与えています。
もし親があるのであれば、親に指定してあげるのがいいかもですが...
参考程度に・・・
投稿2019/01/07 14:20
退会済みユーザー
総合スコア0
0
下記のようにするといかがでしょうか。
css
1#content_text_1 { 2 text-align:justify; 3 text-justify: inter-ideograph 4 5 text-align-last: justify; 6 -moz-text-align-last: justify; 7}
投稿2017/11/01 20:48
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/29 10:36