複数の改行なしスペース（「nbsp」）ではなくタブスペース？

959

 4回入力する代わりに、HTMLにタブ文字を挿入することはできますか？

html 
— ロッチ
ソース
21
行の先頭でタブの複数時間を使用するときに<PRE>を使用すると便利です（Cコードをqoutするときのインスタンスとして）
— Guy
TAB文字が...何をしますか？
— Michel de Ruiter、2015年
独自のタグを定義して<tab>から、jQuery on ready関数を使用して、必要な数の同等のスペースで置き換えるか埋め込むことができます。
— Khaled.K 2015
タブが本当に必要な場合は、white-space
— ぜひ
6
FYI-静的な4x &nbsp;（または単一の&emsp;）がそれを切り取らず、タブと同じように次の「4間隔の」列に整列させたい場合（これは、実際には0または1または2または整列する3つのスペース）。たとえば、一部のテキストエディターなどです。残念ながら、HTMLは...なし<table>では使用できません。また、いくつかのスペースを使用してハッキングしようとします。 ...固定フォントが必要になります....ほとんどの問題は固定フォントの必要性とHTMLが空白を削除するのが好きなことの間にあると思います。
— Pimp Trizkit 2018年

回答:

582

CSSを使用する方がずっとクリーンです。代わりにpadding-left:5emまたはmargin-left:5emを適宜試してください。

— アロッチ
ソース
13
@Alohci CSSを使用したIMHOのパディングはそれほど良くありません。ブラウザでテキストをズームすると、テキストサイズは増加しますが、AFAIKのパディングは増加しないためです。
— AlexV
16
@AlexV-私がしたemように、あなたが次元として使用する場合、それはテキストサイズで拡大するはずです。そうでない場合でも、使用されるズームメカニズムの性質によって異なります。
— Alohci
2
@DavidThielen-TAB要素が出現するHTML 3は、ブラウザメーカーのスターターではなく、TAB要素は実装されていません。代わりに、やや単純なHTML 3.2が作成され、代わりに実装されました。
— Alohci 2013
2
@Eoin-確かに。つまり、これらの場合に本当に必要なのはタブストップです。しかし、それはOPが求めていたものではありませんでした。OPは複数の連続した改行しないスペースの置換を求めていましたが、これは行を整列させませんでした。CSSにはtab-sizeあなたが本当に望んでいるような特性がありますが、そのブラウザーのサポートは不安定です。それができない場合は、テーブルレイアウトまたはおそらくフレックスボックスが最善の策です。
— Alohci
5
これは質問の答えにはなりません。kristianによる以下の回答は、ユーザーが投稿した問題に対処しています
— Pranavan Maru 2018
1265

使用する文字セットによって異なります。

ISO-8859-1 HTMLで定義されたタブのエンティティはありません-しかし以外の空白文字がいくつかあります&nbsp;ように&thinsp;、&ensp;と&emsp;。

ASCIIでは&#09;、タブです。

HTMLエンティティの完全なリストと、Wikipediaの空白に関する有用なディスカッションを次に示します。

— クリスチャン
ソース
2
間でどのような違いである&ensp;と&emsp;？私はテストしましたが、両方ともまったく同じスペースです..！
— Shafizadeh
3
作る秘伝のタレ＆＃09; HTMLのタブ付きスペースとして表示されるのは、空白のCSS定義です。<p style = "display：inline-block; white-space：pre-wrap;">＆＃09;¡Muy bien！Tabbingはスペイン語と英語で動作します</ p>。空白：事前; も動作します。「tab」タグ<tab />をCSS :: before Selector tab :: before {content： "\ 0009";}とともに使用することもできますが、ハイライト表示、切り取り、貼り付け時にタブとして表示されません。
— Jules Bartow
3
@Shafizadeh W3仕様から：enスペースはポイントサイズの半分であり、emスペースは現在のフォントのポイントサイズと同じです。 &emsp;少し大きいです。私はクローム64とFirefox 58で違いを見ることができます
— ドミトリー
MySQLでCrystal Reportで使用する大きなconcat（）クエリを作成するときにこれを探していました。ASCII（＆＃09;）は完全に仕事をしました！
— Mike D Wakelyn
これは私が探していたものです。最後の行のjustify属性を使用していくつかのタイトルを間隔を空けて配置しましたが、それらのいくつかをバラバラにしたくありません。＆ensp; それを防いだ。
— Alex Banman
195

＆emsp; 答えです。

ただし、ワードプロセッサ（Word、Wordperfect、Open Office、Wordworthなど）で水平集計を使用することに慣れている場合は、期待したほど機能しません。幅は固定されており、カスタマイズできません。

CSSは、W3Cが公式のソリューションを提供するまで、はるかに優れた制御を提供し、代替手段を提供します。

例：

padding-left:4em

..または..

margin-left:4em

..適切に

使用する文字セットによって異なります。

いくつかのタブタグを設定して、hタグを使用するのと同じように使用できます。

<style>
    tab1 { padding-left: 4em; }
    tab2 { padding-left: 8em; }
    tab3 { padding-left: 12em; }
    tab4 { padding-left: 16em; }
    tab5 { padding-left: 20em; }
    tab6 { padding-left: 24em; }
    tab7 { padding-left: 28em; }
    tab8 { padding-left: 32em; }
    tab9 { padding-left: 36em; }
    tab10 { padding-left: 40em; }
    tab11 { padding-left: 44em; }
    tab12 { padding-left: 48em; }
    tab13 { padding-left: 52em; }
    tab14 { padding-left: 56em; }
    tab15 { padding-left: 60em; }
    tab16 { padding-left: 64em; }
</style>

...そしてそれらを次のように使用します：

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tabulation example</title>

        <style type="text/css">
            dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
            tab1 { padding-left: 4em; }
            tab2 { padding-left: 8em; }
            tab3 { padding-left: 12em; }
            tab4 { padding-left: 16em; }
            tab5 { padding-left: 20em; }
            tab6 { padding-left: 24em; }
            tab7 { padding-left: 28em; }
            tab8 { padding-left: 32em; }
            tab9 { padding-left: 36em; }
            tab10 { padding-left: 40em; }
            tab11 { padding-left: 44em; }
            tab12 { padding-left: 48em; }
            tab13 { padding-left: 52em; }
            tab14 { padding-left: 56em; }
            tab15 { padding-left: 60em; }
            tab16 { padding-left: 64em; }

        </style>

    </head>

    <body>
        <p>Non tabulated text</p>

        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p>Non tabulated text</p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>

    </body>

</html>
スニペットを展開

上記のスニペットを実行して、視覚的な例を確認してください。

追加ディスカッション

ISO-8859-1 HTMLで定義されている水平集計エンティティはありませんが、&nbspたとえば、通常のもの以外に利用可能な空白文字がいくつかあります。&thinsp;、&ensp;および前述の&emsp;。

また、ASCIIとUnicodeでは&#09;水平方向の集計であることにも言及する価値があります。

— WonderWorker
ソース
2
これは、W3バリデーターにXHTMLよると有効ではありません
— Buksy
＆emsp;以来、それは真実の半分にすぎません。真の有効なW3Cマークアップです。しかし、あなたは明らかに好ましいCSSの例を参照しています。この場合、新しいマークアップであり、W3Cセットの一部ではないカスタムタグを利用しています。W3Cバリデーターは、カスタムタグに常にエラーとしてフラグを立てる程度に厳密です。より重要なのはあなた次第です。そろそろ、HTMLマークアップセットにタブの適切な公式実装が追加されたときです。お役に立てれば。
— WonderWorker 2016年
2
文字列値とHTML矢印タイプの文字を含むSwing JTableヘッダーの場合にこれを使用しました。この文字をセパレーターとして必要としました。よく働く！ありがとう！
— Blake Neal 2017年
2
「奇妙なことに、htmlには水平方向のタブがない」書式設定が一貫してhtmlからcssに移行し、タブは視覚的要素ではなく、書式設定要素であるだけでなく、良い答えであり、十分に説明されている
— MikeT
75

空のスペースを挿入するためにHTMLが提供する3つの異なる方法を以下に示します。

  1. 入力&nbsp;してスペースを1つ追加します。
  2. 入力&ensp;して2つのスペースを追加します。
  3. 入力&emsp;して4つのスペースを追加します。
— sanjeev51
ソース
3
;それらにも追加してください。いいね&nbsp;
— Amio.io 2018
2
この答えは実際に質問に答えます。CSSの回答が回答としてマークされる方法は愚かです。
— マニ
@マニ質問は2009年に行われ、受け付けられた回答は2009年のものです。この回答は2018年に追加されました。そのように見ると、愚かではありません。
— ᴛʜᴇᴘᴀᴛᴇʟ
@ᴛʜᴇᴘᴀᴛᴇʟこれが実際に質問に答えるかどうかを忘れますが、マークされた質問が正確に答えない場合は、私が試みているポイントです。
— Mani、
これが実際の正しい答えです。ありがとう！
— アリエルモナコ
67

試す &emsp;

これは4 &nbsp;秒に相当します。

— アビシェク・ゴエル
ソース
実際、w3.org/MarkUp/html3/specialchars.htmlとしては正しい答えではありません。使用しているフォントのタイプに依存していることを明確に述べ、emスペースは現在のフォントのポイントサイズに等しく、emスペースは2つのスペース文字に相当する
— le0diaz
52

段落の内部（または中央）に複数のスペースを挿入する簡単な方法はありません。CSSを使用することを提案している人たちは、要点を逃しています。段落を常に側からインデントしようとしているのではなく、実際には、段落の特定の場所に余分なスペースを入れようとしている場合があります。

本質的に、この場合、スペースはスタイルではなくコンテンツになります。なぜそんなに多くの人がそれを見ないのか、私にはわかりません。私は彼らがスタイルとコンテンツルールの分離を強制しようとする硬直性を推測します（HTMLは最初から両方を実行するように設計されていました- 多くの時間を費やすことなく適切なタグを使用して一意の要素のスタイルを時々定義することは何の問題もありませんCSSスタイルシートを作成する時間です。適度に使用すると、CSSスタイルシートがまったく読めなくなります。また、何かをすばやく実行できることについても言います。）は、空白文字のみが使用されていると見なすことができる方法に変換されます。スタイルとインデント。

タグ&emsp;と&nbsp;タグに依存せずにスペースを挿入するための適切な方法がない場合、適切な名前のタグを使用して多数のスペースをすばやく挿入できる場合よりも、結果のコードが読みにくくなると私は主張します。 （または、そもそもスペースが不必要に消費されていなかった場合）。

ただし、上記のよう&emsp;に、正しい場所に挿入するために使用するのが最善です。

— GonzoKnight
ソース
1
HTMLは当初からカスタムスタイルを設定するように設計されていませんでした。
— Markus Unterwaditzer 2012年
インデントは必ずしも人々が望んでいるものとは限らないという点について、あなたの主張が大好きです！
— Redwolfプログラム
46

preタグを使用することをお勧めします。前のタグ定義は、テキストを事前にフォーマット。

<pre>
 This is
preformatted text.
It preserves      both spaces

and line breaks.

</pre>

このリンクでpreタグについてもっと知る

— スリカンスムッタバラプ
ソース
1
@HuzaifaSaifuddinどういう意味ですか？<pre>されるHTML5で標準化 HTML4と同じ動作で。
— Sumit
私はと同意...申し訳ありませんが、私はいけない知ってY iはそれを書いています何say..Sorry間違った情報のために
— Huzaifa Saifuddin
出力をスプレッドシートに貼り付けるようにフォーマットしていました。これにより、\ t文字を挿入してタブを付けることができました。間違いなく私の答えでした。良い調子。
— Craig Brett
1
これは私見の最良の選択肢です。また、<pre>にスタイル定義を適用できるため、必要に応じて正しい「モノスペース」フォントを使用できます。例：pre {font-family： "Lucida Console"、Monaco、monospace; font-size：90％; }
— リバービー
41

私は方法を探しているときにこれに出くわし、私が望んでいるもののために簡単に機能するように思われる自分のものを見つけ出してしまいました。私はここに投稿するのが初めてなので、これがうまくいくことを願っています...しかし、CSSでこれを持っています：

span.tab{
    padding: 0 80px; /* Or desired space*/
}

次に、HTMLで、これが必要なように中文の「長いタブ」になるようにします。

<span class="tab"></span>

必要な量&nbsp;または&emsp;必要な量を節約できます。

これが誰かを助けてくれることを願っています！

— ロブ
ソース
3
これによりspan、タブではなく、タグの左側に80ピクセル、右側に80ピクセルが追加されます。
— mcont 2014
CSSがスタイリングを行えるようにしながら、短いマークアップを追加するだけなので、やはり賢い応答です。
— 16年
9

空白が重要になる場合は、フォーマット済みのテキストと<pre>タグを使用することをお勧めします。

— パビウム
ソース
OPは空白にそれほどこだわっていません&nbsp;。複数ののショートカットについて尋ねられました。<pre>タグを呼び出すと、多くの追加作業が発生します。
— 同型写像
モノスペースフォントを回避するには、css "white-space：pre-wrap"
— hultqvist
空白は問題ではありませんthat important。それは人生の事実です。
— Redwolfプログラム
9

段落の最初の文をインデントするだけの場合は、小さなCSSトリックを使用してこれを行うことができます。

p:first-letter {
    margin-left: 5em;
}
— Peirix
ソース
うん。それもうまくいきます。:first-letterポイントが最初の文だけをインデントすることである場合は、それを置くことを覚えてください。
— peirix
9

<tab>タグは、HTML3で導入されたにもかかわらず、ブラウザに組み込まれることはありませんでした。私たちがそれを利用できるようになれば、多くの状況で人生がはるかに楽になるので、私はいつもそれを本当の残念だと思っていました。ただし、これを簡単に修正して、偽の<tab>タグを付けることができます。次のコードをHTMLの先頭に、またはスタイルタグなしでCSSに追加します。

<style>
    tab { padding-left: 4em; }
</style>

それ以降、ドキュメントにタブが必要な場合は、そこに<tab>を挿入します。タブマークに揃わないため、本当のタブではありませんが、不格好な文字エンティティやスパンでディザリングする必要がなく、ほとんどのニーズで機能します。それはあなたのソースをチェックすることを本当に簡単にし、あなたがテーブルや他のより複雑な「ソリューション」の面倒に行きたくない単純なものをフォーマットすることを簡単にします。

このソリューションの優れた点の1つは、テキストドキュメントをすばやく検索/置換して、すべてのTABを<tab>タグで置換できることです。

真の絶対位置のタブをまとめて定義し、必要に応じて適切なタブ（<tab2>や<tab5>など）を使用することもできますが、それ以降の行をインデントせずにそれを行う方法はありません。

— user1388236
ソース
7

テーブルを使用しwidthて、最初のに属性を適用できます<td>。

コード：

<table>
    <tr>
        <td width="100">Content1</td>
        <td>Content2</td>
    </tr>
    <tr>
        <td>Content3</td>
        <td>Content4</td>
    </tr>
</table>

結果

Content1       Content2
Content3       Content4
— Mangkokorix
ソース
ありがとう!! これは、CSSが不可能な状況に最適な最も一般的なソリューションです。
— John Henckel
6

インラインスタイルのスパンを使用しました。プレーンテキストの文字列を処理するときにこれを行う必要があり、\ tを4つのスペース（appx）に置き換える必要があります。&nbsp;最終的なマークアップに非コンテンツスペースが含まれるように、それらが解釈されていたプロセスでそれ以上使用することはできませんでした。

HTML：

<span style="padding: 0 40px">&nbsp;</span>

私はそれを次のようなphp関数で使用しました：

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);
— ゴーディ
ソース
6

タブが1つだけ必要な場合は、次の方法でうまくいきました。

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
</style>

HTMLのようなもので：

<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p>

「タブ」スタイルを追加し、次のようなHTMLを変更することで、「タブ」をさらに追加できます。

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
  .tab1 {
    position: absolute;
    left: 20em;
   }
</style>

HTMLのようなもので：

<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>
— StrangeDucks
ソース
4

CSSを使用している場合は、次のことをお勧めします。

p:first-letter { text-indent:1em; }

これは、従来の出版物のように最初の行をインデントします。

— スレビン
ソース
4

それのための簡単なCSSがあります：

white-space: pre;

HTMLに追加したスペースを統一するのではなく保持します。

— アビ
ソース
3 
<span style="margin-left:64px"></span>

次のように考えてください。1つのタブは64ピクセルに相当します。これがCSSで提供できるスペースです。

— マティーン
ソース
3

次のように、style = "white-space：pre"を使用できます。

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

内部の空白スペースはタブで埋められます。タブの数はテキストによって異なります。

次のようになります。

Text    : value
Text2   : value2
Text32  : value32
— Esgi Dendyanri
ソース
3

使用する必要がある理想的なCSSコードは、「display」プロパティと「min-width」プロパティの組み合わせである必要があります...

display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.
— オルマイド
ソース
2

さて、段落全体から1行だけの最初に長い空白が必要な場合は、これが解決策になる可能性があります。

<span style='display:inline-block;height:1em;width:4em;'>&nbsp;</span>

それが多すぎて書き込めない場合や、多くの場所でそのようなタブが必要な場合は、これを行うことができます

<span class='tab'>&nbsp;</span>

次に、これをCSSに含めます。

span.tab {display:inline-block;height:1em;width:4em;}
— エフゲニー・セーブレフ
ソース
2

箇条書きのないリストを使用して、「タブ付き」の外観にします。（これは、MS Wordを使用するときに時々行うことです）

CSSファイルで：

.tab {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

また、HTMLファイルでは順序付けられていないリストを使用します。

This is normal text
<ul class="tab">
    <li>This is indented text</li>
</ul>

このソリューションの優れた点は、ネストされたリストを使用してさらにインデントできることです。

ここでnoobが話しているので、エラーがあればコメントしてください。

— funct7
ソース
（x）HTMLはドキュメントのコンテンツを指定する必要があり、表示方法はCSSで処理する必要があります。テーブルを使用してWebページをレイアウトすることは、非表形式のデータには決して使用しないでください。
— Nielsvh
1

カスタム空間スパンクラスを使用します

<span class='space'></span>

CSSにスペースクラスを含めます。

.space 
{
   margin-left:45px;
}
— rashedcs
ソース
1
Alohciの回答のように、ブラウザのテキストズームを可能にするために、em/ remmeasurements を使用してください。
— チャーリーハーディング
0

CSSとベストプラクティスを使用すると、ネストされたインデントされたメニューの動的な作成は次のようになります。

  1. indent1、indent2などの入れ子ごとにスタイルを作成し、それぞれに独自の左マージンを指定します。サイト構造がネストの3つのレベルを超えることはめったにありません。
  2. 自己再帰関数内で静的変数（整数）を使用して、再帰を追跡します。
  3. 各ループについてindent、PHPやASPなどのサーバー側スクリプトを使用して、にループ番号を追加し、これらのメニューがCSSによって適切にフォーマットされるようにします。

代替的に、静的変数をループは、複数の使用間隔を追加する&nbsp;または<pre>、必要に応じて、タグ、または他の文字。

水平タブ文字をテストした&#09;ところ、&nbsp;説明したシナリオでは、複数の文字の代わりとしては機能しないことがわかりました。結果が異なる場合があります。

— Ro Mc
ソース
0

これは少し醜い解決策ですが、あなたはこれを行うことができます

var tab = '&nbsp;&nbsp;&nbsp;&nbsp;';

そして、文字列でタブ変数を使用します。

— Aonghus McGovern
ソース
0

「pre」タグのみ：

<pre>Name:      Waleed Hasees
Age:        33y
Address:    Palestine / Jein</pre>

このタグには任意のCSSクラスを適用できます。

— ヤニ
ソース
0

私は単にお勧めします：

/* In your CSS code: */
pre
{
    display:inline;
}

<!-- And then, in your HTML code: -->

<pre>    This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>
— ヨアフ・バルネア
ソース
0 
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

カラーコードがタブの希望する長さにpxが可変である背景と一致していることを確認してください。

次に、<t>の後にテキストを追加します。</ t>

ピリオドはスペースホルダーとして使用され、入力が簡単ですが、「＆＃160;」期間の代わりに使用することもできるので、色分けは無関係です。

<head>
<style> t {letter-spacing:35px;} </style>
</head>

<t>&#160;</t>

これは主にテキストの段落を表示するのに役立ちますが、スクリプトの他の部分でも役立つ場合があります。

— エリックA.タトル
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.