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

958

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

html 
— 罗奇
source
20
我发现在行的开头使用制表符多用时间（用于在C代码退出时的实例性）时使用<PRE>很有帮助
— Guy Kovel
一个TAB角色...做什么？
— Michel de Ruiter，2015年
您可以定义自己的标签<tab>，然后使用jQuery on readyfunction替换或填充所需数量的等效空格。
— Khaled.K，2015年
如果您真的需要标签，请尝试white-space
— -Buksy
6
仅供参考-如果静态4x &nbsp;（或单个&emsp;）没有切割，而您希望它们像下一个制表符那样排到下一个“ 4间距”列，（这有时有时实际上是0或1或2或3个空格对齐）..例如，例如，某些文本编辑器..不幸的是，您不能使用HTML ...没有<table>s ...，而且还需要使用一些空格来尝试破解它...将需要固定字体...。我认为大多数问题都在需要固定字体与HTML喜欢删除空白之间。
— 皮条客Trizkit

Answers:

582

使用CSS更干净。尝试padding-left:5em或margin-left:5em酌情代替。

— 阿罗奇
source
13
@Alohci IMHO用CSS填充不是很好，因为当您在浏览器中缩放文本时，文本大小会增加，但填充AFAIK不会。
— AlexV 2011年
16
@AlexV-如果em像我一样使用尺寸，它应该随文本大小扩展。即使您不这样做，也将取决于所使用缩放机制的性质。
— Alohci 2011年
2
@DavidThielen-HTML 3，其中出现的TAB元素对于浏览器制造商而言是个不起眼的事情，并且从未实现过TAB元素。取而代之的是，创建了HTML 3.2，它稍微简单了一些，而是实现了。
— Alohci 2013年
2
@Eoin-的确如此。也就是说，在这些情况下，您真正​​想要的是制表位。但这不是OP的要求。OP要求替换多个连续的不间断空格，这也不会使行排成一行。CSS具有tab-size您真正想要的属性，但是其浏览器支持却不稳定。否则，您最好的选择是表布局或flexbox。
— 阿洛奇（Alohci）'17
5
这不能回答问题。克里斯蒂安（Kristian）在下面的回答中解决了用户发布的问题
— Pranavan Maru '18
1264

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

有一个在ISO-8859-1 HTML定义没有标签的实体-但也有比其他几个空格字符&nbsp;，如&thinsp;，&ensp;和&emsp;。

在ASCII中，&#09;是一个制表符。

这是HTML实体的完整列表，并对Wikipedia上的空格进行了有用的讨论。

— 克里斯蒂安
source
2
&ensp;和之间有什么区别&emsp;？我测试过，他们两个都有完全相同的空间..！
— Shafizadeh，2013年
3
制作＆＃09;的秘诀 在HTML中显示为选项卡式空间的是CSS空格定义。<p style =“ display：inline-block; white-space：pre-wrap;”>＆＃09;¡Muy bien！使用西班牙和英语</ p>对我有效。空白：pre; 也可以。您还可以将“ tab”标签<tab />与CSS :: before Selector tab :: before {content：“ \ 0009”;}一起使用，但是在突出显示，剪切和粘贴时它不会显示为标签。
— 朱尔斯·巴托
3
@Shafizadeh从W3规范开始：en空格是 磅值的一半，而em空格等于当前字体的磅值。&emsp;稍大。我可以看到Chrome 64和FireFox 58的区别。–
— Dmitry
在MySQL中构建大型concat（）查询以在Crystal Report中使用时正在寻找这个。ASCII（＆＃09;）完美地完成了这项工作！
— Mike D Wakelyn，
这就是我想要的。我使用最后一行justify属性隔开了一些标题，但我不希望其中的一些分开。＆ensp; 防止了。
— 亚历克斯·班曼
195

＆emsp; 就是答案。

但是，如果您习惯于在文字处理器（例如Word，Wordperfect，Open Office，Wordworth等）中使用水平制表，它们将不会像您期望的那样发挥功能。它们是固定宽度的，无法自定义。

在W3C提供正式解决方案之前，CSS可以为您提供更大的控制权，并提供替代方案。

例：

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
source
2
XHTML根据W3验证者，
— Buksy，2013年
因为＆emsp; 是真正有效的W3C标记。但是您显然是在引用有利的CSS示例。在这种情况下，我们将使用自定义标签，这些标签是新标记，不属于W3C集。W3C验证器的严格程度始终是将自定义标签标记为错误。这取决于您，这更重要。现在是时候了，我们在Html标记集中添加了不错的官方标签选项卡。希望这可以帮助。
— WonderWorker
2
在用于带有字符串值和HTML箭头类型字符的Swing JTable标头的情况下，我使用了此方法，在这里我需要使用此字符作为分隔符。很棒！谢谢！
— 布莱克·尼尔
2
“奇怪的是，html中没有水平制表符”并不是所有的奇怪之处都在于格式一直在不断地从html移到css，并且制表符不是视觉元素，而仅仅是格式化元素，而是一个很好的答案并且得到了很好的解释
— MikeT
75

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

  1. 键入&nbsp;以添加一个空格。
  2. 键入&ensp;以添加2个空格。
  3. 键入&emsp;以添加4个空格。
— sanjeev51
source
3
只需添加;到他们。喜欢&nbsp;
— Amio.io
2
这个答案实际上回答了问题。将CSS答案标记为答案是很愚蠢的。
— 玛尼
@Mani这个问题是2009年提出的，可接受的答案是2009年提出的。这个答案是在2018年添加的。如果以这种方式查看，它并不愚蠢。
— ᴛʜᴇᴘᴀᴛᴇʟ
@ᴛʜᴇᴘᴀᴛᴇʟ忘记这是否真的回答了问题，但是标记为未正确回答的问题正是我要提出的重点。
— 玛尼
这是实际的正确答案。谢谢！
— Ariel Monaco
52

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

本质上，在这种情况下，空间成为内容而不是样式。我不知道为什么这么多人看不到。我猜想他们试图强制将样式和内容规则分开的刚性（HTML从一开始就设计成两者兼而有之–偶尔使用适当的标签来定义唯一元素的样式而不必花费很多，这没有错。时间来创建CSS样式表，并且在进行适度使用时绝对没有任何不可读的地方。还可以说可以快速地执行某些操作。）转换为他们只能将空白字符视为仅用于样式和缩进。

而且，当没有优雅的方式无需依赖&emsp;and 插入空格时&nbsp;，我会争辩说，与没有一个适当命名的标签可以使您快速插入大量空格相比，生成的代码变得更加不可读。 （或者，如果您知道不是一开始就不必要地占用了空间）。

如上所述，您最好的选择是将其&emsp;插入正确的位置。

— 奇闻趣事骑士
source
1
HTML从一开始就没有设计成自定义样式。
— Markus Unterwaditzer，2012年
爱您的观点是缩进并不总是人们想要的！
— Redwolf节目
46

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

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

and line breaks.

</pre>

在此链接上了解更多关于pre标签的信息

— 斯里坎特·穆塔瓦拉普（Srikanth Muttavarapu）
source
1
@HuzaifaSaifuddin是什么意思？在HTML5中<pre>被标准化，其行为与HTML4中相同。
— 2016年
很抱歉，我不知道我写的是什么。.我同意你的意思..抱歉，输入的信息不正确
— Saifuddin
我正在格式化要粘贴到电子表格中的输出，这使我可以插入\ t字符来进行制表。绝对是我的答案。很好
— Craig Brett
1
这是恕我直言的最佳选择。另外，我们可以在<pre>上应用样式定义，因此如果需要，我们可以使用正确的'monospace'字体。例如：pre {font-family：“ Lucida Console”，摩纳哥，等宽字体；字体大小：90％；}
— reverpie
41

我在寻找一种方法时碰到了这一点，最终发现自己的方法似乎可以轻松地满足所需。我是刚来这里的新手，所以希望它能起作用...但是在CSS中有此功能：

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

然后在HTML中，像我需要的那样在中间句子中将其作为“长标签”：

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

从量保存&nbsp;或者&emsp;是你所需要的。

希望这可以帮助某人，加油！

— 抢
source
3
这会在span代码（而不是标签）的左侧添加80px，在右侧添加80px 。
— mcont 2014年
仍然是一个聪明的响应，因为您只添加了一点标记，同时允许CSS进行样式设置。
— 调用
9

如果空格变得如此重要，则最好使用预格式化的文本和<pre>标记。

— 凉亭
source
OP对空格不是很特别，只是问了多个&nbsp;的快捷方式。调用<pre>标签会产生很多额外的工作。
— 同构
为避免等宽字体，请使用css“ white-space：pre-wrap”
— hultqvist 2012年
空格不是that important问题。这是生活中的事实。
— Redwolf节目'18
9

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

p:first-letter {
    margin-left: 5em;
}
— 佩里克斯
source
是的 那也可以。如果只想:first-letter缩进第一句话，请记住戴上它。
— peirix
9

尽管在HTML3中引入了<tab>标记，但它从未进入浏览器。我一直以为这是一个真正的遗憾，因为如果在许多情况下都可以使用，生活会容易得多。但是您可以轻松地对此进行补救，以便为您提供伪造的<tab>标签。在HTML的开头添加以下内容，否则（不添加样式标签）添加到CSS中：

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

从那时起，当您需要在文档中使用标签时，在其中放置<tab>即可。它不是真正的制表符，因为它不与制表符对齐，但可以满足大多数需求，而不必因笨拙的字符实体或跨度而烦恼。它使检查源变得非常容易，并且可以轻松格式化不想在表格中遇到麻烦或其他更复杂的“解决方案”的简单事情。

此解决方案的一个不错的方面是，您可以快速搜索/替换文本文档，以用<tab>标记替换所有TAB。

您也许可以定义一堆真正的绝对位置TAB，然后在需要的地方使用适当的选项卡（例如<tab2>或<tab5>或任何其他选项），但是我没有找到一种方法来做到这一点，而不必缩进后面的行。

— 用户名
source
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
— 芒科力克斯
source
谢谢！！对于无法使用CSS的情况，这是最佳和最通用的解决方案。
— 约翰·亨克尔
6

我已经使用跨度与线条样式。在处理一串纯文本时，我不得不这样做，并且需要用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);
— 高迪
source
6

如果只需要一个选项卡，则以下选项对我有用。

<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>
— 奇怪的鸭子
source
4

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

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

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

— 斯列文
source
4

有一个简单的CSS：

white-space: pre;

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

— 阿维
source
3 
<span style="margin-left:64px"></span>

这样考虑：一个制表符等于64像素。这就是CSS可以提供​​的空间。

— 马汀
source
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）
source
3

应该使用的理想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.
— 卤化物
source
2

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

<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;}
— 叶夫根尼·萨维列夫（Evgeny Savelev）
source
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>

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

一个菜鸟在这里说话，因此，如果有任何错误，请发表评论。

— funct7
source
（x）HTML应指定文档的内容，其显示方式应由CSS处理。有理由说明，使用表格布局网页绝对不能用于非表格数据。
— Nielsvh '16
1

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

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

在CSS中包含空间类。

.space 
{
   margin-left:45px;
}
— 粗鲁的
source
1
就像在Alohci的答案中一样，请使用em/ rem尺寸，以允许浏览器文本缩放。
— 查理·哈丁
0

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

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

或者，循环遍历静态变量以使用多个&nbsp;或<pre>标签或其他适当字符。

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

— 罗·麦克
source
0

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

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

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

— Aonghus McGovern
source
0

仅“ pre”标签：

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

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

— 亚尼
source
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>
— 约阿夫·巴尼亚
source
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>

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

— 埃里克·塔特尔
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.