是否可以在 HTML 中插入制表符而不必键入四次
?
很有帮助(用于引用 C 代码时的实例)
TAB
字符...做什么?
<tab>
,然后在 ready
函数上使用 jQuery 来替换或填充所需数量的等效空格。
white-space
(或单个  
)没有切割它,并且您希望它们像标签一样排列到下一个“4 间隔”列,(这意味着有时它实际上0 或 1 或 2 或 3 个空格来排列)..例如.. 比如说,一些文本编辑器.. 不幸的是,你不能在 HTML 中......没有 <table>
s...... 而且,使用尝试破解它的一些空间...将需要固定字体....我认为大多数问题在于需要固定字体和 HTML 喜欢删除空格之间。
这取决于您要使用的字符集。
ISO-8859-1 HTML 中没有定义选项卡实体 - 但除了
之外还有几个空格字符,例如  
、 
和  
。
在 ASCII 中,	
是一个制表符。
Here 是 HTML 实体和 a useful discussion of whitespace on Wikipedia 的完整列表。
使用 CSS 更简洁。请酌情尝试 padding-left:5em
或 margin-left:5em
。
em
作为维度,它应该随着文本大小而扩展。即使您不这样做,也将取决于所使用的缩放机制的性质。
tab-size
属性,但它的浏览器支持一直不稳定。如果做不到这一点,table-layout 或者 flexbox 是你最好的选择。
不,就 HTML 而言,Tab 只是 whitespace。我推荐一个 em-space 来代替它,它很大 (→| |←) ...typically 4 个空格 — 输入为  
.
如果幸运的话,您甚至可以使用 Unicode character ("
") 来解决这个问题。
这是 Unicode 中的空格字符和“零宽度空格”列表。
是答案。
但是,如果您习惯于在 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 中没有定义水平制表实体,但是除了通常的  
之外,还有一些其他可用的空白字符,例如;  
、 
和前面提到的  
。
还值得一提的是,在 ASCII 和 Unicode 中,	
是一个水平制表。
XHTML
以下是 HTML 提供的 3 种不同的插入空格的方法
类型 添加一个空格。类型 添加2个空格。类型 添加4个空格。
;
也添加到它们。喜欢
尝试  
它相当于四个
。
确实没有任何简单的方法可以在段落的内部(或中间)插入多个空格。那些建议你使用 CSS 的人没有抓住重点。您可能并不总是试图从一侧缩进一个段落,但事实上,试图在它的特定位置放置额外的空格。
本质上,在这种情况下,空间成为内容而不是风格。我不知道为什么这么多人看不到这一点。我猜他们试图强制分离样式和内容规则的刚性(HTML从一开始就被设计为两者兼而有之 - 偶尔使用适当的标签定义独特元素的样式而不必花费更多时间来创建 CSS 样式表,并且在适度使用它时绝对没有什么不可读的。还有一些话要说是能够快速做某事。)转化为他们如何只能将空白字符视为仅用于样式和缩进。
如果没有优雅的方式来插入空格而不必依赖  
和
标记,我认为生成的代码变得比如果有一个适当命名的标记可以让你快速插入大量空格(或者,如果你知道,空格一开始就没有被不必要地消耗)。
尽管如此,如上所述,您最好的选择是使用  
插入正确的位置。
最好使用 pre 标签。 pre 标签定义了预格式化的文本。
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
在 this link 了解更多关于 pre 标签的信息
<pre>
是 standardised in HTML5,其行为与 HTML4 中的相同。
上应用样式定义,因此如果需要,我们可以使用正确的“等宽”字体。示例:pre { font-family: "Lucida Console", Monaco, monospace;字体大小:90%; }
我在寻找一种方法时遇到了这个问题,并最终找出了我自己的方法,这似乎很容易满足我的需求。我是新来这里发帖的,所以我希望这行得通……但是在 CSS 中有这个:
span.tab{
padding: 0 80px; /* Or desired space*/
}
然后在您的 HTML 中,像我需要的那样,在中间的句子中将其作为“长标签”:
<span class="tab"></span>
节省您需要的
或  
数量。
希望这对某人有帮助,干杯!
span
标记的左侧添加 80 像素,在右侧添加 80 像素,而不是一个标签。
padding: 0 0 0 80px
。但是,混合像素和 em 和 ens 是一种不好的做法。
可以使用  
、 
、 
或  
。
W3说……
The character entities   and   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.
Wikipedia 的更多信息
AFAIK,唯一的方法是使用
如果您可以使用 CSS,那么您可以使用填充或边距。请参阅 Box model,对于 Internet Explorer,另请参阅 Internet Explorer box model bug。
如果你只想缩进段落中的第一句,你可以用一个小的 CSS 技巧来做到这一点:
p:first-letter {
margin-left: 5em;
}
:first-letter
上。
如果空格变得如此重要,使用预格式化文本和
标签可能会更好。
OP 对空格并没有那么特别,只是询问了多个
的快捷方式。调用<pre>
标记会产生大量额外的工作。要避免使用等宽字体,请使用 css "white-space:pre-wrap"空格不是that important
东西。这是生活中的事实。
<style>
tab { padding-left: 4em; }
</style>
从那时起,当您在文档中需要一个选项卡时,将
此解决方案的一个很好的方面是您可以快速搜索/替换文本文档,以用
您也许可以定义一堆真正的绝对位置制表符,然后在需要的地方使用适当的制表符(例如
我使用了带有线条样式的跨度。我必须这样做,因为我处理纯文本字符串并且需要用 4 个空格 (appx) 替换 \t。我不能在他们被解释的过程中进一步使用
,以便最终标记具有非内容空间。
HTML:
<span style="padding: 0 40px"> </span>
我在这样的 php 函数中使用它:
$message = preg_replace('/\t/', '<span style="padding: 0 40px"> </span>', $message);
您可以使用表格并将 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
如果您只需要一个选项卡,以下对我有用。
<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>
有一个简单的css:
white-space: pre;
它保留您在 HTML 中添加的空格,而不是统一它们。
如果您使用的是 CSS,我会建议以下内容:
p:first-letter { text-indent:1em; }
这将像传统出版物一样缩进第一行。
<span style="margin-left:64px"></span>
可以这样考虑:一个标签等于 64 像素。所以这是我们可以通过 CSS 提供的空间。
好吧,如果一个人只需要在整个段落中的一行开头有一个长空格,那么这可能是一个解决方案:
<span style='display:inline-block;height:1em;width:4em;'> </span>
如果这写得太多,或者在很多地方都需要这样的标签,那么你可以这样做
<span class='tab'> </span>
然后将其包含在 CSS 中:
span.tab {display:inline-block;height:1em;width:4em;}
我们可以像这样使用 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
应该使用的理想 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.
您可以写一次  
,而不是写四次
来获得等于 tab 的空间。
我使用没有项目符号的列表来给出“标签”外观。 (这是我在使用 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>
这个解决方案的美妙之处在于您可以使用嵌套列表进行进一步的缩进。
菜鸟在这里说话,所以如果有任何错误,请评论。
如果你想要 TAB
像制表符一样工作,即使在 contenteditables 中
不想使用丑陋的“pre”字体
然后使用代替 nbsp 的:
<pre class='TAB'>	</pre>
把它放在你的 CSS 中:
.TAB {
margin:0; padding:0;
display:inline;
tab-size: 8;
}
根据您的需要更改标签大小。
使用 CSS 和最佳实践,嵌套缩进菜单的动态创建如下:
为每个嵌套创建一个样式,例如 indent1、indent2 等,每个都指定自己的左边距。站点结构应该很少超过三层嵌套。在自递归函数中使用静态变量(整数)来跟踪递归。对于每个循环,使用服务器端脚本(如 PHP 或 ASP)将循环编号附加到单词缩进后,以便这些菜单由 CSS 适当地格式化。
或者,循环遍历静态变量以使用多个
或 <pre>
标记或其他字符(视情况而定)添加间距。
通过测试水平制表符,	
我发现它不能替代我描述的场景中的多个
。你可能会有不同的结果。
只有“pre”标签:
<pre>Name: Waleed Hasees
Age: 33y
Address: 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>
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>
<t>.</t>
确保颜色代码与背景相匹配,像素可根据选项卡的所需长度而变化。
然后在
句号用作空格,更容易输入,但 '& #160;'也可以用来代替句号,因此颜色编码是不相关的。
<head>
<style> t {letter-spacing:35px;} </style>
</head>
<t> </t>
这主要用于显示文本段落,但可能在脚本的其他部分有用。
不定期副业成功案例分享
 
和 
有什么区别?我测试过,它们的空间完全相同..!¡ Tabbing 对我有用西班牙语和英语
。空白:pre;也有效。您还可以使用“标签”标签 
稍大。我可以看到 Chrome 64 和 FireFox 58 的区别。