web-dev-qa-db-ja.com

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

可能な方法：

<pre> ... </pre>

または

style="white-space:pre"

他に何か？

htmlcsstabsspacepre
154
Yeseanul

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

&emsp;と&ensp;

120
Giri

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

水平スペーサー用：

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

垂直スペーサー用：

<span style="display:block; height: YOURHEIGHT;"></span>
102
Japol

スペースには&nbsp;、&lt;には<（エンティティ番号&#60;より小さい）、&gt;には>（エンティティ番号&#62;より大きい）を使用できます。

完全なリストは、このアドレスにあります。 http://www.w3schools.com/html/html_entities.asp

50
Halim Qarroum

&emsp;を試す

のドキュメントに従って - https://www.w3.org/MarkUp/html3/specialchars.html

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

36
Abhishek Goel

私はこれを使うのが好きです。

あなたのCSSでは：

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

あなたのHTMLでは：

<p>Some Text <span class="tab">Tabbed Text</span></p>
22
Ivar Harris

HTMLにおけるSpacesの種類

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

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

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

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

文の間隔 - "</br>"

このリンクは役に立つかもしれません。 [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]をチェックしてください

15
Edgy Affairs
<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

この段落の最初の行は、タブ付きインデントのように、5文字ほど字下げされます。

ここ を参照してください。

14
sammyukavi

<span style="padding-left:68px;"></span>あなたはpadding-left padding-right padding-top padding-bottomも使うことができます

6
Ron1925

タブをいくつかの行に並べるために<table>を使うことができます。

各行を<tr> ... </tr>に入れる

<td> ... </td>内のその行内の各要素

もちろん、各テーブルセルの間隔を調整してそれらの間のスペースを調整することもできます。

これはそれらを整列させるでしょう、そして彼らはかなり素敵に見えるでしょう:)

3
Argento

@Ivarよりさらに一歩進んで自分のカスタムタグをそのようにスタイルしてみてください。

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

そしてHTMLの実装...

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

Screenshot of this code sample

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

3
Dan

固定スペースまたはハードスペースとも呼ばれるNon-Breaking SPace（NBSP）は、ワードラップで分割できないスペースを1行に作成するためにプログラミングおよびWord処理で使用されます。 HTMLでは、&nbsp;を使用すると、ソースコードだけでなくWebページに表示される複数のスペースを作成できます。

2
mastro

余白、パディングだけを使うことはできませんか？これが正しいことではない場合は、申し訳ありませんが、残念ながら、要素の周囲に "空白の領域"を追加することができます。したがって、次のCSSタグを使用できます。

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

これがあなたがしたことではないならば、もう一度申し訳ありません。

1
James Pac

標準のCSS tab-sizeではないのはなぜですか？
タブ記号を挿入するには（標準のタブキーがカーソルを移動する場合）、ALT + 0 + 0 + 9を押します

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

私が好む：

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

スニペットや
簡単な例
https://css-tricks.com/almanac/properties/t/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>
1
MrSwed

これは私のために働きました：私の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
0
user8657661

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
Steve McRoberts

このコード&#8287;を使用して、HTMLにスペースを追加できます。タブスペースは5回以上使用してください。ここで確認してください： https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

0
Roshan Yadav