HTML のテキスト間にスペースを追加する
-
<pre>タグを使用して、HTML のテキストにスペースを挿入する -
を使用する HTML のテキストにスペースを挿入するには -
CSS の
paddingプロパティを使用して、HTML のテキストにスペースを挿入する
この記事では、HTML のテキストにスペースとタブを挿入するいくつかの方法について説明します。HTML は通常、一度に複数の空白を許可しません。これらのメソッドは、複数の空白を追加するのに役立ちます。
<pre> タグを使用して、HTML のテキストにスペースを挿入する
<pre> タグは、フォーマット済みのテキストを定義します。HTML コードで記述されたとおりにテキストを表示します。このタグ内の空白は、書き込まれたとおりに表示されます。ほとんどすべての Web ブラウザでサポートされています。<pre> タグを使用すると、HTML を使用してテキストにスペースを挿入できます。<pre> タグは、HTML のほぼすべてのグローバル属性をサポートします。
たとえば、HTML 本文内で、最初に <pre> タグを開きます。このタグ内に、選択したテキストを入力します。ここで、通常、テキスト内の文の単語の間にランダムな空白スペースをいくつか追加します （I'm learning HTML used in the example below）。目的のテキストが完成したら、<pre> タグを閉じます。また、以前に開いたすべてのタグを閉じることを忘れないでください。
以下の例は、HTML のテキストに銀行スペースを追加する方法を示しています。<pre> タグを開くと、フォーマット済みのテキストが指定されます。I'm learning HTML というテキストは、<pre> タグ内に記述されています。ご覧のとおり、learning と HTML の間に 5つの空白が使用されています。出力には、書き込まれたときと同じように、2つの単語の間に 5つの空白スペースも表示されます。好きなだけスペースを入れることができます。このようにして、HTML のテキストに空白を追加できます。
サンプルコード：
<pre> I'm learning HTML</pre>
を使用する HTML のテキストにスペースを挿入するには
を使用できます HTML コードのテキストに空白を追加するタグ。エンティティ NBSP は、ノーブレークスペースを表します。改行しないスペースは、改行しないスペースであると解釈します。改行なしのスペースで区切られた 2つの単語は、異なる行ではなく同じ行にあります。ブラウザが HTML ページのスペースを切り捨てないようにすることは有利です。
たとえば、HTML 本文内に、選択したテキストを入力します。空白を追加する場所に、 と入力します。同じ数の を入力する必要がありますあなたが望む空白スペースとして。 の 5つのインスタンスを記述します残りのテキストを入力し続けます。完了したら、以前に開いたタグをすべて閉じます。
以下の例は、HTML コードのテキストに空白を追加する別の方法を示しています。learning という単語の後、エンティティ その後 5 回注文されます。これは、learning と HTML の間に 5つの空白があることを意味します。コードのテキストに 5つのスペースを入力すると、ブラウザは 4つの空白スペースを削除しますが、 は必要な数のスペースを追加するのに役立ちます。したがって、これは HTML コードに空白を追加するもう 1つの方法です。
コード例：
<body>
I'm learning HTML
</body>
CSS の padding プロパティを使用して、HTML のテキストにスペースを挿入する
CSS の padding プロパティを使用して、HTML のテキストに空白を追加することもできます。<span> タグとともに padding プロパティを使用して、空白を実現できます。<span> タグは、新しい行で開始されないため、インラインコンテナと呼ばれます。テキストまたはドキュメントをマークアップするために使用されます。視覚的な変化だけを行わないため、本質的に何も表していません。スタイリングの目的で使用され、すべての Web ブラウザーでもサポートされています。また、HTML のすべてのグローバル属性とイベント属性もサポートしています。<span> 要素の padding-left プロパティを使用して、スペースを追加できます。
たとえば、HTML 本文内に、希望のテキストを入力します。空白を追加する場所に、<span> 要素を作成し、その中にスタイルを適用します。padding-left プロパティを 30px に設定します。その後、<span> タグを閉じます。残りのテキストを書き込み、コード内で以前に開いたすべてのタグを閉じます。
以下の例では、learning という単語の後に <span> 要素を作成しました。要素に 30px の左パディングを適用しました。これは、learning という単語の後に 30px のスペースを作成し、その後、残りの単語を続けたことを意味します。したがって、CSS と HTML を使用してテキストにスペースを追加しました。
サンプルコード：
<body>
I'm learning <span style="padding-left:30px;"></span>HTML
</body>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn