标签空间而不是多个不间断的空格（“nbsp”）？

时间：2009-10-15 11:03:40

标签： html

是否可以在HTML中插入制表符而不必输入 四次？

36 个答案:

答案 0 :(得分：1223)

这取决于您要使用的字符集。

ISO-8859-1 HTML中没有定义标签实体 - 但除了 之外还有一些空白字符，例如 ， 和{{1} }。

在ASCII中， 是一个标签。

Here是HTML实体和a useful discussion of whitespace on Wikipedia的完整列表。

答案 1 :(得分：544)

使用CSS更清晰。请改为尝试padding-left:5em或margin-left:5em。

答案 2 :(得分：218)

不，就{而言，Tab只是whitespace。我建议使用em-space而不是大（→| |←）... typically 4个空格 - 并输入为 {{1 }} 即可。

如果你幸运的话，你甚至可以使用Unicode character（“ ”）来逃避。

答案 3 :(得分：183)

  

＆amp; 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;是一个水平制表。

答案 4 :(得分：66)

尝试 &emsp;

相当于四个&nbsp; s。

答案 5 :(得分：50)

在段落的内部（或中间）插入多个空格真的没有简单的方法。那些暗示你使用CSS的人忽略了这一点。你可能并不总是试图从一个方面缩进一个段落，但事实上，试图在它的特定位置放置额外的空格。

本质上，在这种情况下，空格变为内容和不样式。我不知道为什么这么多人看不到。我猜他们试图强制分离样式和内容规则的刚性（HTML从一开始就设计为两者兼而有之 - 偶尔使用适当的标签定义唯一元素的样式没有错无需花费更多时间来创建CSS样式表，并且在适度使用时绝对没有什么不可读的。还有一些东西可以说是能够快速做某事。）转化为他们只能考虑的方式空格字符仅用于样式和缩进。

如果没有优雅的方式来插入空格而不必依赖&emsp;和&nbsp;标签，我会争辩说，生成的代码变得比没有适当命名的标签更难以理解这将允许您快速插入大量空格（或者，如果您知道空格不是首先被消耗掉的话）。

尽管如此，如上所述，您最好的选择是使用&emsp;插入正确的位置。

答案 6 :(得分：49)

下面是HTML提供的3种不同的方式来插入空白

  1. 键入&nbsp;以添加一个空格。
  2. 键入&ensp;以添加2个空格。
  3. 键入&emsp;以添加4个空格。

答案 7 :(得分：44)

最好使用 pre 标记。 pre 标记用于定义预格式化的文本。

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

and line breaks.

</pre>

详细了解this link

上的预标记

答案 8 :(得分：40)

我在寻找一种方法的过程中遇到了这种情况，最终找出了我自己的方法，似乎很容易找到想要的东西。我是新来发布的，所以我希望这个有用...... 但是在CSS中有这个：

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

然后在你的HTML中，这就像我需要的那样是你在句子中的“长标签”：

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

保存您需要的&nbsp;或&emsp;金额。

希望这可以帮助别人，欢呼！

答案 9 :(得分：18)

&emsp; ， &ensp; ， &#8195; 或 &#8194; 可以使用。

W3说...... 

The character entities &ensp; and &emsp; denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font.

Read More at W3.org for HTML3

Read More at W3.org for HTML4

Wikipedia

更多

答案 10 :(得分：15)

AFAIK，唯一的方法是使用

&nbsp;

如果你可以使用CSS，那么你可以使用填充或边距。请参阅 Box model ，对于Internet Explorer，还请阅读 Internet Explorer box model bug 。

答案 11 :(得分：8)

＆lt; tab＆gt;尽管在HTML3中引入，但标签从未成为浏览器。我一直认为这是一个真正的遗憾，因为如果我们能够将它们提供给我们，生活会在许多情况下变得更加容易。但你可以轻松地解决这个问题，给你一个假的＆lt; tab＆gt;标签。将以下内容添加到HTML的开头，或者（不带样式标记）添加到CSS中：

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

从那时起，当您需要文档中的标签时，请将＆lt; tab＆gt;在那里。它不是一个真正的标签，因为它没有与标签标记对齐，但它适用于大多数需求，而不必与笨拙的字符实体或跨度抖动。这样可以很容易地检查您的来源，并且可以轻松地设置简单的事情，您可能不愿意去寻找桌子或其他更复杂的解决方案＆＃34;。

此解决方案的一个不错的方面是，您可以快速搜索/替换文本文档，以使用＆lt; tab＆gt;替换所有TAB。标签

您可能能够定义一堆真正的绝对位置TAB，然后在需要的地方使用适当的选项卡（例如＆lt; tab2＆gt;或＆lt; tab5＆gt;或其他），但我还没有找到办法没有它缩进后续行就可以做到这一点。

答案 12 :(得分：8)

如果空格 重要，那么使用预先格式化的文本和＆lt; pre＆gt;可能会更好。标签

答案 13 :(得分：7)

如果你想缩进段落中的第一句话，你可以用一个小CSS技巧来做：

p:first-letter {
    margin-left: 5em;
}

答案 14 :(得分：6)

您可以使用表格并将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

答案 15 :(得分：5)

我使用了带有线条样式的跨度。我必须这样做，因为我处理一串纯文本，需要用4个空格（appx）替换\ t。我不能在他们被解释的过程中进一步使用&nbsp;，以便最终标记具有非内容空间。

HTML：

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

我在像这样的php函数中使用它：

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);

答案 16 :(得分：4)

如果您只需要一个标签，以下内容适用于我。

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

答案 17 :(得分：3)

如果您使用的是CSS，我建议如下：

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

这将像传统出版物一样缩进第一行。

答案 18 :(得分：3)

<span style="margin-left:64px"></span>

考虑这样：一个标签等于64像素。所以这是我们可以通过CSS提供的空间。

答案 19 :(得分：2)

我使用没有项目符号的列表来提供＆＃34;标签＆＃34;出现。 （这是我在使用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>

此解决方案的优点在于您可以使用嵌套列表进行进一步缩进。

这里有一个菜鸟，所以如果有任何错误，请发表评论。

答案 20 :(得分：2)

我们可以像这样使用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

答案 21 :(得分：2)

应该使用的理想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.

答案 22 :(得分：2)

有一个简单的CSS：

white-space: pre;

它保留您在HTML中添加的空格，而不是统一它们。

答案 23 :(得分：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;}

答案 24 :(得分：1)

如果你想要标签

  • 像制表符一样工作，即使在 contenteditables 中也是如此
  • 不想使用丑陋的“pre”字体

然后用 nbsp 代替：

<pre class='TAB'>&#009;</pre>

把它放在你的 CSS 中：

.TAB {
margin:0; padding:0;
display:inline;
tab-size: 8;
}

根据需要更改标签大小。

答案 25 :(得分：1)

您也可以使用：

p::before {
    content: "";
    padding-left: 30px;
}

将“p”替换为您想到的任何其他选择器。

答案 26 :(得分：0)

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

<t>.</t>

确保颜色代码与背景匹配 px可变为所需的标签长度​​。

然后在＆lt;之后添加你的文字。 t＆gt;。 / t＆gt;

这个时期被用作空间持有者，它更容易打字，但'＆amp; ＃160;”可以代替周期使用，因此颜色编码是无关紧要的。 

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

<t>&#160;</t>

这主要用于显示文本段落，但在脚本的其他部分可能会有用。

答案 27 :(得分：0)

<强> CSS 

<html>
<head>
<style>
    tab:before
    {
        content: "\00a0\00a0\00a0\00a0";
    }
</style>
</head>

<强> HTML 

<body>
    <tab> #include &lt; stdio.h &gt; <br>
    <tab> <br>
    <tab> int main (void) <br>
    <tab> { <br>
    <tab> <tab> printf ("Hello, World!"); <br>
    <tab> <tab> return 0; <br>
    <tab> } <br>
</body>
</html>

<强>渲染

  

enter image description here

答案 28 :(得分：0)

这不是一个直接的答案，但我想在Markdown文档中添加一个标签。我正在绘制一个像这样的对象图：

--Parent
    |
    + Child 1

当然，通过缩进4个空格将其标记为代码的简单方法，然后在Markdown中被视为代码。

    --Parent
        |
        + Child 1

答案 29 :(得分：0)

这是一个丑陋的解决方案，但你可以这样做

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

然后在字符串中使用tab变量。

答案 30 :(得分：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>

答案 31 :(得分：0)

仅“pre”标签：

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

您可以在此标记上应用任何CSS类。

答案 32 :(得分：0)

＆nbsp;单位取决于字体大小。要了解这种依赖性，请使用此CSS / HTML方法考虑em和rem度量单位。

CSS 

.tab { margin-left: 1rem; }

HTML 

<div class=“tab> ...p and h elements... </div>

显示

1em大约等于4＆nbsp;但＆nbsp;单位和＆nbsp; rem单位的显示取决于元素和样式的使用，缩进像这样。

--------h1 indented 1em
--p indented 1em
----h1 indented 1rem
----p indented 1rem

左边距和左边距都起作用。 HTML或CSS中没有 tab 长度单位。可以使用 .tab 类选择器。

答案 33 :(得分：0)

使用CSS和最佳实践，动态创建嵌套的缩进菜单如下：

  1. 为每个嵌套创建一个样式，例如indent1，indent2等，每个嵌套都指定自己的左边距。网站结构应该很少超出三层嵌套。
  2. 在自递归函数中使用静态变量（整数）来跟踪递归。
  3. 对于每个循环，使用服务器端脚本（如PHP或ASP）将循环编号附加到单词indent，以便通过CSS适当地格式化这些菜单。

    4. 或者，循环使用静态变量以使用多个&nbsp;或<pre>标记或其他字符添加间距。

    通过测试水平制表符&#09;，我发现它在我描述的场景中不能替代多个&nbsp;。您可能会有不同的结果。

答案 34 :(得分：0)

p { background-color: #FFEEEE; margin: 0; padding: 0.5em 0; }
<p style="white-space: pre-wrap; tab-size: 4">&#9← One tab&#9&#9← two tabs&#9&#9&#9← three tabs&#9&#9&#9&#9← four tabs.</p>
<p style="white-space: pre-wrap; tab-size: 4">  ← This one is one character.</p>
<p style="white-space: pre-wrap; tab-size: 42">&#9← This one has come out too far.</p>
<p style="white-space: pre-wrap; tab-size: 8">&#9← Say! what a lot of tabs there are.</p>

TL;DR（太懒了；没有“运行代码”）：

  1. 通过输入 &#9 在文本中插入制表符，或者（如果您确定您的文档是 UTF-8 encoded）只需按 tab 键！
  2. 将 white-space: pre-wrap; 添加到文本元素的 CSS 规则中，以阻止空白字符（包括制表符）折叠。
  3. 将 tab-size: 4; 添加到您的文本元素的 CSS 规则中，以确保您的标签宽度等于四个标准空格字符。

（在许多答案和评论中散布着关于这些事情中的每一个的片段和线索，但没有一个将它们聚集在一起以回答问题的措辞。）

编辑：不幸的是，堆栈片段将我的 Unicode 制表符转换为空格！所以演示的那部分（第 2 行）不起作用。如果通过代码格式化程序运行代码，您可能会遇到类似的问题。 &#9 避免了此类问题。

答案 35 :(得分：-2)

当您需要制表符时，通常您想要在项目的左侧缩进，而不管其他项目的宽度如何。 我的意思是，在下列情况下，所有其他解决方案都将失败：

try/catch

因此，我建议在bootstrap中使用div的CSS样式。

在任何需要标签的地方，只需创建宽度合适的div。例如：

1234     When a programmer fails, ask a web designer
12     When a programmer fails, ask a web designer
相关问题
最新问题