ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS を使用して 1 行のテキストを中央揃えにし、複数行を左に揃えるにはどうすればよいですか? _html/css_WEB-ITnose

CSS を使用して 1 行のテキストを中央揃えにし、複数行を左に揃えるにはどうすればよいですか? _html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:03:50
オリジナル
1688 人が閲覧しました

何年も前にこの問題を解決した 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 現時点ではまだ検討中)

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート