HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOMスタイルのwhiteSpaceプロパティ

HTML DOMスタイルのwhiteSpaceプロパティは、HTMLドキュメント内の要素のテキスト内のタブ、改行、および空白の処理方法を返し、変更します。

構文

以下は構文です-

  • whiteSpaceを返す

object.style.whiteSpace

  • whiteSpaceの変更

object.style.whiteSpace = “value”

値

ここで、値は-

になります。
値 説明
初期 このプロパティ値をデフォルト値に設定します。
継承 このプロパティ値は親要素から継承されます。
通常 この中で、空白のシーケンスは1つに折りたたまれ、必要に応じてテキストが折り返されます。
nowrap その中で、空白のシーケンスは1つに折りたたまれ、テキストは次の行に折り返されません。
pre 空白はブラウザによって保持され、テキストは改行が発生した場合にのみ折り返されます。
pre-line この中で、空白のシーケンスは1つに折りたたまれ、テキストは必要な場合にのみ次の行に折り返されます。
プレラップ 空白はブラウザによって保持され、テキストは必要な場合にのみ次の行に折り返されます。

例

HTMLDOMスタイルのwhiteSpaceプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   p {
      border: 2px solid #fff;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem 0;
}
</style>
</head>
<body>
<h1>DOM Style whiteSpace Property Example</h1>
<p>
   I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
   I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
   I'm paragraph element with some dummy text.
</p>
<button onclick="add()" class="btn">Change whiteSpace</button>
<script>
   function add() {
      document.querySelector('p').style.whiteSpace = "pre-line";
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMスタイルのwhiteSpaceプロパティ

「空白を変更」をクリックします 段落要素の空白を処理する方法の動作を変更するための「」ボタン-

HTMLDOMスタイルのwhiteSpaceプロパティ


  1. HTMLDOMスタイルのuserSelectプロパティ

    HTML DOMスタイルのuserSelectプロパティは、HTMLドキュメントで要素のテキストをユーザーが選択できるかどうかを返し、変更します。 構文 以下は構文です- userSelectを返す object.style.userSelect userSelectの変更 object.style.userSelect = “value” 値 ここで、値は-になります。 値 説明 auto ユーザーはブラウザの設定に応じてテキストを選択できます。 なし ユーザーがテキストを選択することはできません。 テキスト その中で、テ

  2. HTMLDOMスタイル方向プロパティ

    HTML DOMスタイルの方向プロパティは、テキストの方向を指定または返すために使用されます。デフォルト値はltrです。 以下は、-の構文です。 方向プロパティの設定- object.style.direction = "ltr|rtl|initial|inherit" 上記のプロパティ値は次のように説明されます- 値 説明 ltr これはデフォルト値であり、テキストは左から右に流れます。 rtl テキストは右から左に流れます。 初期 このプロパティを初期値に設定します。 継承 親プロパティ値を継承するに