このチュートリアルでは、この「ワードラップ」プロパティに関する完全なガイダンスを提供し、CSSの「ワードラップ」プロパティを使用する例を実行します。
例1：
コードを開始し、VisualStudioCodeで実行します。 まず、新しいファイルを起動してから、言語としてHTMLを選択します。 ここで、「！」と入力します。 「Enter」を押します。 ここには、すべてのHTML基本タグがあります。 その結果、これらすべてのタグを手動で追加する必要がなくなります。 この後、CSSファイルの名前を「head」の「link」タグに挿入するだけです。 本文に2つの見出しを配置し、1つの長い単語を書き込むdivを作成して、CSSの「word-wrap」プロパティを使用し、それがどのように機能するかを示します。
「text-decoration」プロパティを使用し、このプロパティにキーワード「underline」を使用して、「color」を適用して「red」に設定することにより、見出しを装飾しています。 この見出しにスタイリングを適用して、魅力的なものにします。 また、2番目の見出しである「緑」を「色」として装飾し、「テキスト装飾」を適用して「下線」に設定します。 「div」の「幅」を「150px」に設定し、その周囲に「境界線」を作成しています。 この境界線は、「幅」が約「3px」で、「色」が「赤」の「実線」タイプです。
ここでは、「ワードラップ」プロパティを適用し、「デフォルト」値でもある「通常」に設定しています。 それは長い言葉を壊すことはありません。 長い単語は、HTMLコードで記述されたとおりに表示されます。 div用に作成した境界を越え、長いテキストは同じままで、この単語を壊すことはありません。
出力は、長い単語がHTMLファイルに書き込んだときと同じように見えることを示しています。 境界線を越えて一列に表示されます。 長い単語は、「word-wrap」プロパティを「default」と同じ「normal」に設定するため、ここでは分割されません。
例2：
同じHTMLコードを使用しているので、この例では「word-wrap」プロパティの値として「break-word」キーワードを適用します。
見出し1「h1」の「色」は「あずき色」を使用し、この見出しに下線を引くために「テキスト装飾」を使用しています。 「h2」については、「h2」、「色」、「下線」の見出しにも「紫」を使用しています。 「div」コンテナの「幅」は「160px」であり、「border」プロパティを使用してその周囲に境界線を設計します。 divの境界線の「幅」に「3px」を設定しました。これは「ソリッド」形式で、色は「栗色」です。 これは、「break-word」値を使用する「word-wrap」プロパティです。 この値は、指定されたスペースに従って長い単語を分割します。 出力を見て、このプロパティを利用することで長い単語がどのように途切れるのかを知ることができます。
divコンテナ内で長い単語がどのように壊れて調整されているかに注目してください。 この長い単語は、「word-wrap」プロパティに「break-word」値を使用しているため、この出力では壊れています。
例3：
「h1」と「h2」の2つの見出しがあります。 これらの見出しの下に、「a」と「b」という名前の2つの異なるdivがあります。 両方のdiv内にテキストを書き込み、各divに長い単語を入れます。 現在、「ワードラップ」プロパティを利用するCSSファイルを作成しています。
「color」プロパティを使用し、「green」として定義して見出しを装飾し、「text-decoration」プロパティとこの「text-decoration」プロパティのキーワード「underline」を定義します。 また、次の見出しの「色」は「オレンジ」を使用し、「下線」を設定した「テキストデコレーション」を実装しています。 「div」の「width」を「180px」に設定します。ここではdivの名前を指定しないため、両方のdivにこの幅が設定されます。 また、両方のdivに適用される「border」プロパティも利用します。 両方のdivの境界線の「幅」は「3px」、「実線」タイプで、「青」は境界線の「色」に設定されています。
最初のdivの名前は「div」です。 a」と「ワードラップ」属性が適用されます。 値は「通常」に設定され、これは「デフォルト」値でもあります。 このdivでは長い単語は壊れていません。 長い単語は、HTMLコードで入力したとおりに表示されます。 これで、「div」という2番目のdivができました。 b」。 このために、「word-wrap」プロパティを利用し、「break-word」値を使用します。 長い単語は、この値で提供されたスペースに従って分割されます。 このプロパティと値を活用することで、出力で長い単語がどのように分割されるかを確認できます。
「div」の「word-wrap」の値として「normal」を使用しているため、最初のdivの長い単語は壊れません。 a」。 しかし、2番目のdivでは、長い単語も指定されたスペースで調整されていることがわかります。 2番目のdiv内にあるこの長い単語は壊れています。 これは、「word-wrap」プロパティの「break-word」値が使用されているためです。
例4：
この例の見出しを作成し、クラス名が異なる2つの段落を、最初の段落の「par」と2番目の段落の「par1」として配置します。 また、両方の段落に長い単語を入れ、CSSの「word-wrap」プロパティを使用します。
見出しの「色」はRGB形式で設定されます。 その値は「rgb（112、6、6）」で、これは「栗色」の色合いです。 また、「h1」には「Algerian」フォントファミリを使用しています。 また、「h2」の「font-family」を「TimesNewRoman」に設定しました。 h2の「色」は「青紫」で、「イタリック」にスタイリングして魅力的にしています。
ここで、最初の段落を定義する「par」が登場します。 ここで定義する「幅」は「200px」で、「背景色」を「水色」に設定します。 このための境界線も作成したいので、「border」を使用して「2px黒一色」に設定します。 ここで説明する「パディング」は「10px」で、段落のテキストのサイズは「par」の場合は「20px」です。 この段落では「ワードラップ」プロパティを使用しません。
この後、「p1」という名前の別の段落があります。 「幅」を「11em」、「背景色」を「水色」と定義しました。 これにも境界線が必要になるため、「境界線」を使用して「2px黒一色」に構成します。 私たちが話している「パディング」は「10px」です。 「word-wrap」プロパティを利用して、前のコードで説明した「word-break」に設定し、段落テキストのサイズは「par1」の「20px」です。
ここでは、最初の段落の長い単語は、これに「ワードラップ」プロパティを使用しないために壊れていません。これはデフォルトとして設定されています。 ただし、2番目の段落には「word-wrap：break-word」を使用しているため、段落の長い単語は壊れています。
結論：
このチュートリアルの目的は、CSSの「ワードラップ」プロパティの使用方法を説明することです。 このチュートリアルでは、CSSの「ワードラップ」プロパティを確認し、それが何であるか、どのように使用するか、どのように機能するかについて説明しました。 このプロパティは長い単語を分割し、指定されたスペースでこの長い単語を調整することを説明しました。 また、この「ワードラップ」プロパティの使用方法の例と、すべての例の結果も示しました。
The post CSSワードラップ appeared first on Gamingsym Japan.