ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSで行折り返しを超えてdivを設定する方法

CSSで行折り返しを超えてdivを設定する方法

WBOY
リリース: 2021-11-19 14:38:58
オリジナル
8026 人が閲覧しました

CSS では、「word-break」属性を使用して、div の改行を超える効果を実現できます。この属性により、div コンテンツが最後で自動的に折り返されます。構文は「div{word-break」です。 :break-all;} "。

CSSで行折り返しを超えてdivを設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css で行の折り返しを超えて div を設定する方法

CSS では、word-break 属性を使用して、自動行折り返しの処理方法。

word-break 属性を使用すると、ブラウザは任意の位置で改行を実現できます。

構文は次のとおりです:

word-break: normal|break-all|keep-all;
ログイン後にコピー

次の点に注意してください:

  • normal はブラウザのデフォルトの行折り返しルールを使用することを意味します。

  • #break-all は、単語内で改行が許可されることを示します。

  • #keep-all は、半角スペースまたはハイフンでのみ改行できることを意味します。

改行以降に div を設定する方法を例に挙げてみましょう。例は次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style type="text/css">
    div{
        width:50px;
        word-break:break-all;
    }
    </style>
    <div>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
</body>
</html>
ログイン後にコピー

出力結果:

CSSで行折り返しを超えてdivを設定する方法

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 !

以上がCSSで行折り返しを超えてdivを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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