HTML / CSSを使用してテキストにスペース/タブを挿入する方法

183

可能な方法：

<pre> ... </pre>

または

style="white-space:pre"

他に何か？

html  css  tabs  space  pre 
— イェセヌル
ソース
1
— benedict_w
「タグ」または「タブ」を意味しますか？
— user123444555621 2012年
2
&nbsp;タブを作成する以外に相当するものはありますか？
— ファンソラノ2016年
ありません&tab;が、私はgithubでこの小さなjsスニペットを見つけました（基本的に検索して、5つ&nbsp;続けて作成します）... gist.github.com/AustinDizzy/1231e8​​2184bea35c42ad
— dgig

回答:

145

tab space通常使用する2つの単語/文の間に挿入するには

&emsp; そして &ensp;

— ギリ
ソース
113

スペースの幅/高さが&nbsp;通常を超えている場合：

水平スペーサーの場合：

<span style="display:inline-block; width: YOURWIDTH;"></span>

垂直スペーサーの場合：

<span style="display:block; height: YOURHEIGHT;"></span>
— ジャポル
ソース
注：ピクセル単位で高さまたは幅を指定してください（10pxなど）。
— About7Deaths
43

お試しください&emsp;。

特殊文字のドキュメントに従って：

文字エンティティ&ensp;と&emsp;は、それぞれenスペースとemスペースを示します。enスペースはポイントサイズの半分であり、emスペースは現在のフォントのポイントサイズと同じです。固定ピッチフォントの場合、ユーザーエージェントはenスペースをAスペース文字と同等として扱い、emスペースを2つのスペース文字と同等として扱うことができます。

— アビシェク・ゴエル
ソース
24

私はこれを使いたいです：

あなたのCSSで：

.tab { 
       display:inline-block; 
       margin-left: 40px; 
}

あなたのHTMLで： 

<p>Some Text <span class="tab">Tabbed Text</span></p>
— イヴァー・ハリス
ソース
1
これは良い答えです。しかし、私はちょうど（それが置き換えることを意味、それはCSSクラスの代わりにIDを使用して、より良いだろうと言いたい#tabで.tabとid="tab"によってclass="tab"、我々は同じ文書内で複数回それを使用する場合、我々は未定義の動作を持っている可能性があるため）。たとえば、この質問を参照してください。
— ヒルダービトールリマペレイラ2017
これは今日私に役立ちました。どうもありがとうございます。
— justnisar
19

SpacesHTMLのタイプ

テキストの間に4つのスペースを作成します &emsp;

テキスト間に2つのスペースを作成します- &ensp;

テキスト間に通常のスペースを作成します- &nbsp;

狭いスペースを作成します（通常のスペースに似ていますが、わずかな違い- "&thinsp";

文間の間隔- "</br>"

このリンクはあなたを助けるかもしれません。チェックアウト[ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

— ヴィヴェク・ブディティ
ソース
6

<span style="padding-left:68px;"></span>

次のものも使用できます。

padding-left
padding-right
padding-top
padding-bottom
— ロン1925
ソース
4

@Ivarよりもさらに進んで、独自のカスタムタグを次のようにスタイル設定してください。

tab {
    display: inline-block;
    margin-left: 40px;
}

そしてHTMLの実装...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

このコードサンプルのスクリーンショット

そして私のスクリーンショット...

— ダン
ソース
3

いくつかの行で何かを揃えるためにタブを要求している場合は、を使用できます<table>。

各行をに入れます<tr> ... </tr>。そして、その行内の各要素<td> ... </td>。もちろん、各テーブルセルのパディングを常に制御して、それらの間のスペースを調整できます。

これはそれらを整列させ、それらはかなり見栄えがします:)

— アルジェント
ソース
3
テーブルは、フォーマットではなく表形式のデータを表すために使用する必要があります。90年代のテーブルでは、HTMLの制限と、ブラウザー間で一貫して機能するスタイルを使用してHTMLを作成することへの不満のために、フォーマットに頻繁に使用されていました。今日ではアンチパターンと見なされています。
— David Baucum 2017年
私はあなたの要点を理解しています、それはいくつかの古い学校の解決策かもしれませんが、私は彼の問題を一度経験しました、そしてテーブルを使うことは私にとって完璧に働きました
— Argento
1
はい、しかし意味論的な意味を台無しにすることなく、（最新のCSSで）テーブルのスタイルを使用できます！ディスプレイ：テーブルなど
— Julix
3

固定スペースまたはハードスペース、非分割スペースとも呼ばれます（NBSP）は、ワードラップで分割できない行にスペースを作成するためにプログラミングとワードプロセッシングで使用されます。

HTMLを&nbsp;使用すると、ソースコードだけでなくWebページにも表示される複数のスペースを作成できます。

— マストロ
ソース
1

空白？パディングだけを使用できませんか？それはアイデアです。これにより、要素の周囲に「空白領域」を追加できます。したがって、次のCSSタグを使用できます。

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
— ジェームスパック
ソース
1

標準のCSSを使用する tab-size。

タブ記号を挿入するには（標準のタブキーの場合はカーソルを移動します）Alt+ 0+ 0+9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

私の好み：

*{-moz-tab-size: 1; tab-size: 1;}

tab-sizeのスニペットまたはクイックファインドの例をご覧ください。

.t1{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}
<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>
スニペットを展開

— MrSwed
ソース
0

これは私のために働きました：

私のCSSでは：

tab0  { position:absolute;left:25px;  }
tab1  { position:absolute;left:50px;  }
tab2  { position:absolute;left:75px;  }
tab3  { position:absolute;left:100px; }
tab4  { position:absolute;left:125px; }
tab5  { position:absolute;left:150px; }
tab6  { position:absolute;left:175px; }
tab7  { position:absolute;left:200px; }
tab8  { position:absolute;left:225px; }
tab9  { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }

次に、HTMLではタブを使用します。

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75
— ユーザー8657661
ソース
0

user8657661の答えは私のニーズ（物を数行に並べる）に最も近いものです。ただし、サンプルコードを提供どおりに機能させることはできませんでしたが、次のように変更する必要がありました。

<html>
    <head>
        <style>
            .tab9 {position:absolute;left:150px; }
        </style>
    </head>

    <body>
        Dog Food: <span class="tab9"> $30</span><br/>
        Milk of Magnesia:<span class="tab9"> $30</span><br/>
        Pizza Kit:<span class="tab9"> $5</span><br/>
        Mt Dew <span class="tab9"> $1.75</span><br/>
    </body>
</html>

あなたは右詰めの数字が必要な場合は、変更することができますleft:150pxしright:150px、しかし、あなたは（書かれた数字は、画面の右端から150個のピクセルになるよう）、画面の幅に基づいて番号を変更する必要があります。

— スティーブ・マクロバーツ
ソース
0

あなたはのようなパディングを通して行うことができます<span style="padding-left: 20px;">、あなたはここでより多くの方法をチェックすることができます-HTMLの空白スペース

— プラーン
ソース
-2

これが「タブ」テキスト（コピーアンドペースト）です： ""

このサイトの回答制限のため、タブが異なるか完全なタブではない可能性があります。

— ジェームズ
ソース
1
私はあなたが答えをより明確に言い表す必要があると思います。どこかからスペースをコピーして貼り付けるということですか？ここでうまくいくとは思いません。
— smilyface
1
Markdownソースにはタブがありますが、ここのHTML出力にはありません（代わりに単一のスペースです）。
— Peter Mortensen
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.