制表符空格而不是多个非中断空格（“nbsp”）？

是否可以在超文本标记语言中插入制表符，而不必输入 四次？

3286440 次浏览
小开

AFAIK，唯一的方法是使用

 

如果您可以使用CSS，那么您可以使用填充或边距。请参阅盒子模型，对于Internet Explorer，也请阅读Internet Explorer框模型bug。

小开
最佳答案

使用CSS要干净得多。请酌情尝试padding-left:5em或margin-left:5em。

小开

不，就超文本标记语言而言，Tab只是空白。我推荐em-空间，它是这么大的（→||←）…通常4空间宽-输入为 。

如果你幸运的话，你甚至可以使用Unicode字符（“ ”）。

小开

如果空格变得到重要，最好使用预格式化文本和标记。

小开

这取决于你想使用哪个字符集。

在ISO-8859-1超文本标记语言中没有定义制表符实体-但是有几个除 之外的空格字符，例如 ， 和 。

在ASCII中，	是一个制表符。

这里是超文本标记语言实体和维基百科上关于空白的有用讨论的完整列表。

小开

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

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

如果你使用CSS，我建议如下：

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

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

小开

在段落内部（或中间）插入多个空格确实没有任何简单的方法。那些建议您使用CSS的人没有抓住重点。您可能并不总是试图从侧面缩进段落，但实际上，试图在它的特定位置添加额外的空格。

从本质上讲，在这种情况下，空格变成了的内容和没有的样式。我不知道为什么这么多人没有看到这一点。我猜他们试图强制分离样式和内容规则的僵硬性（超文本标记语言从一开始就被设计成两者兼而有之-偶尔使用适当的标签定义独特元素的样式没有错，而不必花费更多时间来创建CSS样式表，当它被适度使用时，绝对没有什么不可读的。对于能够快速执行某些操作，也有一些话要说。）翻译为他们只能将空格字符视为仅用于样式和缩进。

如果不依赖 和 标签就没有插入空格的优雅方法，我认为结果代码变得更加不可读，而不是有一个适当命名的标签，它可以让你快速插入大量的空格（或者，如果你知道，一开始就没有不必要地消耗空格）。

然而，正如上面所说，你最好的选择是使用 插入到正确的位置。

小开

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

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

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

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

小开

在CSS中这样做：

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

然后在你的超文本标记语言中，这是你的“长标签”，就像我需要的那样：

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

从您需要的&nbsp;或&emsp;数量中保存。

小开

我使用了带行内样式的跨度。我不得不这样做，因为我处理一个纯文本字符串，需要用4个空格（appx）替换\t。我不能使用&nbsp;，因为在他们被解释的过程中，最后的标记有非内容空格。

超文本标记语言：

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

我在php函数中使用了它，如下所示：

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

只有“前”标签：

<pre>Name:      Waleed HaseesAge:        33yAddress:    Palestine / Jein</pre>

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

小开

我只是建议：

/* 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>
小开

最好使用预标签。预标签定义预格式化文本。

<pre>This ispreformatted text.It preserves      both spaces
and line breaks.
</pre>

了解更多关于此链接的预标记

小开

您可以使用表并将width属性应用于第一个<td>。

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

结果

Content1       Content2Content3       Content4
小开

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

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

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

小开

是答案。

但是，如果您习惯于在文字处理器（例如Word，Word完美，Open Office，Wordworth等）中使用水平表格，它们就不会像您期望的那样实用。

CSS为您提供了更大的控制权，并提供了一种替代方案，直到W3C提供官方解决方案。

示例：

padding-left:4em

…或者…

margin-left:4em

…酌情

这取决于你想使用哪个字符集。

您可以设置一些tab标签，并像使用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超文本标记语言中没有定义水平制表实体，但是除了通常的&nbsp之外，还有一些其他空格字符可用，例如；&thinsp;，&ensp;和前面提到的&emsp;。

值得一提的是，在ASCII和Unicode中，&#09;是一个水平制表。

小开

如果你只需要一个标签，下面的工作对我来说。

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

使用超文本标记语言，例如：

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

您可以通过添加其他“选项卡”样式和更改超文本标记语言来添加更多“选项卡”，例如：

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

使用超文本标记语言，例如：

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

好吧，如果一个人只需要在整段中的一行开头有一个长空格，那么这可能是一个解决方案：

<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;}
小开

您还可以使用：

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

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

小开

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

W3说…

字符实体和分别表示en空间和em空间，其中en空间是点大小的一半，em空间等于当前字体的点大小。

阅读更多关于HTML3的W3.org

阅读更多关于HTML4的W3.org

更多关于维基百科

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

确保颜色代码与背景匹配px变量为选项卡所需的长度。

然后在之后添加文本。< /t>

句号被用作空格，更容易打字，但是“ ”可以用来代替句号，这也使得颜色编码是不相关的。 

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

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

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

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

小开

标签从未进入浏览器，尽管是在HTML3中引入的。我一直认为这是一个真正的遗憾，因为如果我们可以使用它，在许多情况下生活会容易得多。但是你可以很容易地补救这个问题，给你一个假的标签。在你的超文本标记语言的头部添加以下内容，或者（没有样式标签）添加到你的CSS中：

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

从那时起，当您需要在文档中添加选项卡时，请将放在其中。它不是真正的选项卡，因为它不与选项卡标记对齐，但它适用于大多数需求，而无需在笨拙的字符实体或跨度中犹豫不决。它使检查源代码变得非常容易，并且可以轻松格式化简单的东西，而不必去处理表格或其他更复杂的“解决方案”的麻烦。

这个解决方案的一个很好的方面是，您可以对文本文档进行快速搜索/替换，以用标记替换所有Tab。

您可能能够定义一堆真正的绝对位置选项卡，然后在需要时使用适当的选项卡（例如或或其他），但我还没有找到一种方法可以在不缩进后续行的情况下做到这一点。

小开

我使用不带项目符号的列表来呈现“选项卡式”外观。（这是我有时使用MS Word时所做的）

在CSS文件中：

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

在超文本标记语言文件中使用无序列表：

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

这个解决方案的美妙之处在于您可以使用嵌套列表进行进一步的缩进。

一个新手在这里说话，所以如果有任何错误，请评论。

小开

试试看&emsp;

它相当于四个&nbsp;。

小开

css

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

超文本标记语言

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

呈现

在此处输入图片描述

小开

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

--Parent|+ Child 1

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

    --Parent|+ Child 1
小开

我们可以这样使用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    : valueText2   : value2Text32  : value32
小开

应该使用的理想CSS代码应该是“显示”和“最小宽度”属性的组合……

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.
小开

我们使用自定义空间跨度类

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

在CSS中包含空格类。

.space{margin-left:45px;}
小开

下面是超文本标记语言提供的3种不同的插入空格的方法

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

有一个简单的css：

white-space: pre;

它保留了您在超文本标记语言中添加的空格，而不是统一它们。

小开

单位依赖于字体大小。要理解这种依赖关系，请考虑使用此CSS/超文本标记语言方法的em和rem测量单位。

css

.tab { margin-left: 1rem; }

超文本标记语言

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

表示

1em大约等于4，但是em单元和 rem单元显示取决于元素和样式的使用，缩进类似于这样。

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

左边缘和左填充都有效。超文本标记语言或CSS中没有选项卡长度单位。可以使用. tab类选择器。

小开

如果你想要标签

  • 像制表器一样工作，即使在内容编辑中也是如此
  • 不想使用丑陋的“前”字体

然后使用而不是nbsp：

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

把这个放在你的CSS中：

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

根据您的需要更改标签大小。

小开 

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>

太长别读（太懒；没有运行代码）：

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

（许多回答和评论中散布着关于这些事情的片段和线索，但没有一个能把它们结合在一起回答问题的措辞。）

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

小开

而不是写&nbsp;四个时间的空间等于选项卡，你可以写一次&emsp;。


提交答案