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

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

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

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

使用される属性:

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

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 サイトの他の関連記事を参照してください。