ホームページ  >  記事  >  ウェブフロントエンド  >  CSS 内の中国語テキストが div を超える場合はどうすればよいですか?

CSS 内の中国語テキストが div を超える場合はどうすればよいですか?

王林
王林オリジナル
2021-05-20 14:38:356813ブラウズ

CSS 内の中国語テキストが div を超える問題の解決策は、div に overflow、word-break、word-wrap 属性を追加し、属性値を hidden に設定することです。それぞれブレークオールとブレークワード。

CSS 内の中国語テキストが div を超える場合はどうすればよいですか?

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

次の図に示すように、div にテキスト文字列を入力しましたが、テキストの内容がそれを超えました。余分なテキストを削除する 下の図に示すように、自動行折り返しを行うにはどうすればよいですか?

CSS 内の中国語テキストが div を超える場合はどうすればよいですか?

使用される属性:

overflow 属性は、コンテンツが要素ボックスからオーバーフローした場合に何が起こるかを指定します。

CSS 内の中国語テキストが div を超える場合はどうすればよいですか?

hidden コンテンツはトリミングされ、残りのコンテンツは非表示になります。

    #word-break 属性は自動行折り返しの処理方法を指定します。
  • break-all 単語内での改行を許可します。

    word-wrap 属性を使用すると、長いコンテンツを自動的に折り返すことができます。
  • break-word 長い単語または URL アドレス内の改行。

    具体的な実装コードは次のとおりです:
  • html:

    <div class="dbubble-text">
        nishi shfishfshfscccccccccccccccccccifhsssfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
     </div>
  • css:
.dbubble-text {
display: inline-block;
font-size: 14px;
color: #303030;
line-height: 1.6;
font-family: "微软雅黑";
width: 200px;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}

学習ビデオ共有:

CSS ビデオ チュートリアル

#

以上がCSS 内の中国語テキストが div を超える場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。