ChatGPT解决这个技术问题 Extra ChatGPT

制表符空格而不是多个不间断空格(“nbsp”)?

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

我发现在行首使用制表符多时间时使用
 很有帮助(用于引用 C 代码时的实例)
												
TAB 字符...做什么?
您可以定义自己的标签 <tab>,然后在 ready 函数上使用 jQuery 来替换或填充所需数量的等效空格。
如果您确实需要标签,请尝试 white-space
仅供参考 - 如果静态 4x&nbsp;(或单个 &emsp;)没有切割它,并且您希望它们像标签一样排列到下一个“4 间隔”列,(这意味着有时它实际上0 或 1 或 2 或 3 个空格来排列)..例如.. 比如说,一些文本编辑器.. 不幸的是,你不能在 HTML 中......没有 <table>s...... 而且,使用尝试破解它的一些空间...将需要固定字体....我认为大多数问题在于需要固定字体和 HTML 喜欢删除空格之间。

J
James Donnelly

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

ISO-8859-1 HTML 中没有定义选项卡实体 - 但除了 &nbsp; 之外还有几个空格字符,例如 &thinsp;&ensp;&emsp;

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

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


&ensp;&emsp; 有什么区别?我测试过,它们的空间完全相同..!
制作 的秘诀在 HTML 中显示为选项卡式空间是空白 CSS 定义。

¡ Tabbing 对我有用西班牙语和英语

。空白:pre;也有效。您还可以使用“标签”标签 以及 CSS ::before Selector tab::before {content:"\0009";} 但在突出显示、剪切和粘贴时它不会显示为标签.
@Shafizadeh 来自 W3 specs一个 en 空间是磅值的一半,一个 em 空间等于当前字体的磅值。 &emsp; 稍大。我可以看到 Chrome 64 和 FireFox 58 的区别。
在 MySQL 中构建用于 Crystal Report 的大型 concat() 查询时正在寻找这个。 ASCII ( ) 完美地完成了这项工作!
这就是我一直在寻找的。我使用最后一行 justify 属性分隔了一些标题,但我不希望其中一些分开。  阻止了这一点。
A
Alohci

使用 CSS 更简洁。请酌情尝试 padding-left:5emmargin-left:5em


@Alohci 恕我直言,使用 CSS 填充并不是那么好,因为当您在浏览器中缩放文本时,文本大小会增加,但填充 AFAIK 不会增加。
@AlexV - 如果您像我一样使用 em 作为维度,它应该随着文本大小而扩展。即使您不这样做,也将取决于所使用的缩放机制的性质。
@DavidThielen - HTML 3,其中出现 TAB 元素对于浏览器制造商来说是一个非首发,并且 TAB 元素从未实现过。取而代之的是,创建了 HTML 3.2,它稍微简单一些,并且被实现了。
@Eoin - 确实。即在这些情况下您真正想要的是制表符stops。但这不是OP所要求的。 OP 要求替换多个连续的不间断空格,这也不会将行排成一行。 CSS 有一个您真正想要的 tab-size 属性,但它的浏览器支持一直不稳定。如果做不到这一点,table-layout 或者 flexbox 是你最好的选择。
这不能回答问题。克里斯蒂安的以下答案解决了用户发布的问题
a
ashleedawg

不,就 HTML 而言,Tab 只是 whitespace。我推荐一个 em-space 来代替它,它很大 (→| |←) ...typically 4 个空格 — 输入为 &emsp; .

如果幸运的话,您甚至可以使用 Unicode character ("") 来解决这个问题。

这是 Unicode 中的空格字符和“零宽度空格”列表。


W
WonderWorker

 是答案。

但是,如果您习惯于在 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>

...并像这样使用它们:

制表示例

非制表文本

制表文本

制表文本

列表文本

列表文本

列表文本

列表文本

列表文本

列表文本

非列表文本

列表文本

列表文本

列表文本

列表文本

列表文本

运行上面的代码片段以查看可视化示例。

额外讨论

ISO-8859-1 HTML 中没有定义水平制表实体,但是除了通常的 &nbsp 之外,还有一些其他可用的空白字符,例如; &thinsp;&ensp; 和前面提到的 &emsp;

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


根据 W3 validator,这不是有效的 XHTML
这只是对了一半,因为  是真正有效的 W3C 标记。但是您显然指的是有利的 CSS 示例。在这种情况下,我们使用自定义标签,这是新的标记,而不是 W3C 集合的一部分。 W3C 验证器对始终将自定义标签标记为错误的程度非常严格。由你决定哪个更重要。是时候让我们对添加到 Html 标记集的选项卡进行正式的正式实施了。希望这可以帮助。
我在一个带有字符串值和 HTML 箭头类型字符的 Swing JTable 标题的案例中使用了这个,我需要这个字符作为分隔符。效果很好!谢谢!
“奇怪的是,html 中没有水平选项卡”并不是那么奇怪,因为格式一直从 html 转移到 css,并且选项卡不是视觉元素,只是一个格式化元素,但是很好的答案和很好的解释
l
loon

以下是 HTML 提供的 3 种不同的插入空格的方法

类型  添加一个空格。类型  添加2个空格。类型 添加4个空格。


只需将 ; 也添加到它们。喜欢&nbsp;
这个答案实际上回答了这个问题。 CSS答案如何标记为答案是愚蠢的。
@Mani这个问题是在2009年提出的,接受的答案是从2009年开始的。这个答案是在2018年添加的。当你这样看时,它并不愚蠢。
@ᴛʜᴇᴘᴀᴛᴇʟ 忘记这是否真的回答了这个问题,但标记的那个没有准确回答是我想要表达的观点。
这是实际正确的答案。谢谢!
P
Peter Mortensen

尝试 &emsp;

它相当于四个&nbsp;


实际上不是 w3.org/MarkUp/html3/specialchars.html 的正确答案。清楚地说这取决于所使用的字体类型,em space 等于当前字体的磅值,em space 相当于两个空格字符
我相信 &emsp 是一个中断的空白字符,而   是一个非中断的空白字符,对吗?因此,就视觉空间而言,这些仅是等效的,但与换行无关。
P
Peter Mortensen

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

本质上,在这种情况下,空间成为内容而不是风格。我不知道为什么这么多人看不到这一点。我猜他们试图强制分离样式和内容规则的刚性(HTML从一开始就被设计为两者兼而有之 - 偶尔使用适当的标签定义独特元素的样式而不必花费更多时间来创建 CSS 样式表,并且在适度使用它时绝对没有什么不可读的。还有一些话要说是能够快速做某事。)转化为他们如何只能将空白字符视为仅用于样式和缩进。

如果没有优雅的方式来插入空格而不必依赖 &emsp;&nbsp; 标记,我认为生成的代码变得比如果有一个适当命名的标记可以让你快速插入大量空格(或者,如果你知道,空格一开始就没有被不必要地消耗)。

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


HTML 并不是从一开始就设计为自定义样式的。
喜欢你关于缩进并不总是人们想要的观点!
P
Peter Mortensen

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

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

and line breaks.

</pre>

this link 了解更多关于 pre 标签的信息


@HuzaifaSaifuddin 你是什么意思? <pre>standardised in HTML5,其行为与 HTML4 中的相同。
对不起,我不知道是我写的……我同意你说的……抱歉信息有误
我正在格式化输出以粘贴到电子表格中,这允许我插入 \t 字符来进行制表符。绝对是我的答案。进展顺利。
这是恕我直言的最佳选择。此外,我们可以在
 上应用样式定义,因此如果需要,我们可以使用正确的“等宽”字体。示例:pre { font-family: "Lucida Console", Monaco, monospace;字体大小:90%; }
                        				                   		
R
Rob

我在寻找一种方法时遇到了这个问题,并最终找出了我自己的方法,这似乎很容易满足我的需求。我是新来这里发帖的,所以我希望这行得通……但是在 CSS 中有这个:

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

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

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

节省您需要的 &nbsp;&emsp; 数量。

希望这对某人有帮助,干杯!


这将在 span 标记的左侧添加 80 像素,在右侧添加 80 像素,而不是一个标签。
仍然是一个聪明的回应,因为您只添加了一小部分标记,同时允许 CSS 进行样式设置。
我同意@mcont,如果需要 80 像素的左侧标签,我会将其更改为 padding: 0 0 0 80px。但是,混合像素和 em 和 ens 是一种不好的做法。
m
matsjoyce

可以使用 &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 的更多信息


P
Peter Mortensen

AFAIK,唯一的方法是使用

&nbsp;

如果您可以使用 CSS,那么您可以使用填充或边距。请参阅 Box model,对于 Internet Explorer,另请参阅 Internet Explorer box model bug


P
Peter Mortensen

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

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

是的。那也行。如果要仅缩进第一句,请记住将其放在 :first-letter 上。
p
pavium

如果空格变得如此重要,使用预格式化文本和

 标签可能会更好。
                			                   			


OP 对空格并没有那么特别,只是询问了多个 &nbsp; 的快捷方式。调用 <pre> 标记会产生大量额外的工作。
要避免使用等宽字体,请使用 css "white-space:pre-wrap"
空格不是 that important 东西。这是生活中的事实。
u
user1388236

标签从未进入浏览器,尽管它是在 HTML3 中引入的。我一直认为这是一个真正的遗憾,因为如果我们可以使用它,在许多情况下生活会容易得多。但是你可以很容易地解决这个问题,给你一个假的 标签。在您的 HTML 或其他(不带样式标签)的头部添加以下内容到您的 CSS 中:

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

从那时起,当您在文档中需要一个选项卡时,将 放在那里。它不是真正的制表符,因为它不与制表符对齐,但它可以满足大多数需求,而不必在笨拙的字符实体或跨度上左右摇摆。它使检查您的来源变得非常容易,并且在您不想去麻烦的表格或其他更复杂的“解决方案”的地方格式化简单的东西。

此解决方案的一个很好的方面是您可以快速搜索/替换文本文档,以用 标记替换所有 TAB。

您也许可以定义一堆真正的绝对位置制表符,然后在需要的地方使用适当的制表符(例如 或其他),但我还没有找到一种方法来做到这一点而不缩进后续行.


G
Gordy

我使用了带有线条样式的跨度。我必须这样做,因为我处理纯文本字符串并且需要用 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);

P
Peter Mortensen

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

谢谢!!对于无法使用 CSS 的情况,这是最好和最通用的解决方案。
S
StrangeDucks

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

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

A
Avi

有一个简单的css:

white-space: pre;

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


S
Slevin

如果您使用的是 CSS,我会建议以下内容:

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

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


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

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


E
Evgeny Savelev

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

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

E
Esgi Dendyanri

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

O
Olumide

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

I
Imad Ullah

您可以写一次 &emsp;,而不是写四次 &nbsp; 来获得等于 tab 的空间。


f
funct7

我使用没有项目符号的列表来给出“标签”外观。 (这是我在使用 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>

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

菜鸟在这里说话,所以如果有任何错误,请评论。


(x)HTML 应该指定文档的内容,它的显示方式应该由 CSS 处理。使用表格布局网页的原因不应该用于非表格数据。
F
Frank34

如果你想要 TAB

像制表符一样工作,即使在 contenteditables 中

不想使用丑陋的“pre”字体

然后使用代替 nbsp 的:

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

把它放在你的 CSS 中:

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

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


M
Mihai Iorga

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

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

或者,循环遍历静态变量以使用多个 &nbsp;<pre> 标记或其他字符(视情况而定)添加间距。

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


P
Peter Mortensen

只有“pre”标签:

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

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


P
Peter Mortensen

我会简单地推荐:

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

E
Eric A. Tuttle
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

确保颜色代码与背景相匹配,像素可根据选项卡的所需长度而变化。

然后在之后添加你的文字。

句号用作空格,更容易输入,但 '& #160;'也可以用来代替句号,因此颜色编码是不相关的。

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

<t>&#160;</t>

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