ホームページ > 記事 > ウェブフロントエンド > CSS を使用して 1 行のテキストを中央揃えにし、複数行を左に揃えるにはどうすればよいですか? _html/css_WEB-ITnose
CSS を使用して 1 行のテキストを中央揃えにし、複数行を左に揃えるにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:03:501644ブラウズ
何年も前にこの問題を解決した Blue Ideal のマスターがいたのを覚えています。しかし何年も経ちましたが、検索エンジンを使っても見つかりませんでした。そこで、ここで質問します。
達成したい効果は次のとおりです:
テキストの長さが不明な場合、テキストの長さがボックスの幅 (1 行) より小さい場合、テキストは中央に配置されます。
テキストの長さがボックスの幅より大きい場合、テキストは自動的に折り返され、複数行のテキストになります。このとき、テキストは左揃えになります。
下の図は例です。
純粋な CSS ソリューションがあればいいのですが、これのために js を書くのは費用対効果が高くありません。それをjsで解決するのは非常に簡単なことですが。 < p style='overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
width: 200px;max-width:200px;*width:expression(this.scrollWidth > 200 ? '200px' : ' auto')
自動行折り返しを超えています。
解決策: http://blog.csdn.net/FungLeo/article/details/49797311 (2015 年 11 月 12 日 13:03:39 現時点ではまだ検討中)
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。