ホームページ > ウェブフロントエンド > htmlチュートリアル > DIV+CSS実践操作7:中国語コンテンツモジュールは、指定したwidth_html/css_WEB-ITnoseを超えるとテキストが折り返されず、楕円に置き換えられるように制御します

DIV+CSS実践操作7:中国語コンテンツモジュールは、指定したwidth_html/css_WEB-ITnoseを超えるとテキストが折り返されず、楕円に置き換えられるように制御します

WBOY
リリース: 2016-06-24 11:31:45
オリジナル
1349 人が閲覧しました

は管理部門のメイン Web ページを作成しながら、中国語部門のメイン Web ページも作成しています。当然のことながら、自分で実践して初めて、

についてのさまざまな質問に遭遇することができます。メソッドを使用し、最後に変更と継続的なデバッグを行って、最終的に目的の効果を実現します。中国語部門のメイン Web ページを構築する際には、多くの問題が発生します

。 1 つ目は、リンク テキストをフォーマットするときに、固定幅のテキストが多すぎると、このような結果が望ましくないことです

。もう 1 つは、余分な幅を必要とするテキストを省略記号に置き換えたいということです。

。可能な値は次のとおりです:

(2) word-break (この属性は CSS3 に新たに追加されました)

この属性は自動行折り返しの処理方法を指定します。可能な値は次のとおりです:

余分なテキストを非表示にする方法の CSS スタイルを見てみましょう:

(1) overflow

属性は、コンテンツが要素ボックスからオーバーフローしたときに何が起こるかを指定します。可能な値は次のとおりです:

(2) text-overflow (CSS3 の新しい属性)

この属性は、テキストが含まれる要素からオーバーフローしたときに何が起こるかを指定します。可能な値は次のとおりです:

ここで、overflow 属性と text-overflow 属性が同時に使用された場合にのみ、余分な幅に達したテキストが省略記号に置き換えられることに注意してください。上上記の効果を達成したい場合は、次の属性設定を実行する必要があります複数の行で使用すると、最初の行のみが効果を持ちます。

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