标签空间，而不是多重非破坏空间(“?”)? [英]Tab space instead of multiple non-breaking spaces (“nbsp”)?

最新推荐文章于 2024-10-02 10:53:34 发布

jcoiwenwfkowe

最新推荐文章于 2024-10-02 10:53:34 发布

阅读量320

点赞数

文章标签：列表 python java html css

原文链接：https://www.itdaan.com/blog/2009/10/15/9dfdf83af8f6c2cf90902149f2239a4c.html

版权

Is it possible to insert a tab character in HTML instead of having to type   four times?

是否可以在HTML中插入一个制表符，而不用输入四次吗?

32 个解决方案

#1

487

It's much cleaner to use CSS. Try padding-left:5em or margin-left:5em as appropriate instead.

使用CSS要干净得多。试着用右舷:5em或左舷:5em代替。

#2

1154

It depends on which character set you want to use.

这取决于您希望使用哪个字符集。

There's no tab entity defined in ISO-8859-1 HTML - but there are a couple of whitespace characters other than   such as  , &ensp;,and &emsp;.

在ISO-8859-1 HTML中没有定义制表符实体——但是除了& t;例如&thinsp， &ensp，和&emsp。

In ASCII, 	 is a tab.

在ASCII,& # 09年;是一个选项卡。

Here is a complete listing of HTML entities and a useful discussion of whitespace on Wikipedia.

这里有一个完整的HTML实体列表，以及对Wikipedia上空格的有用讨论。

#3

191

No, tab is just whitespace as far as HTML is concerned. I'd recommend an em-space instead which is this big (-> <-) and is input as &emsp;. You might even be able to get away with using the unicode character for it if you're lucky.

不，就HTML而言，tab仅仅是空格。我推荐一个em-space，它是这么大的(-> <-)，输入为如果幸运的话，您甚至可以使用unicode字符来进行操作。

#4

161

&emsp; is the answer.

就是答案。

However, they won't be as functional as you might expect if you are used to using horizontal tabulations in word-processors e.g. Word, Wordperfect, Open Office, Wordworth, etc. They are fixed width, and they cannot be customised.

但是，如果您习惯在文字处理程序中使用水平制表，例如Word、Wordperfect、Open Office、Wordworth等，它们的功能就不会像您所期望的那样。它们的宽度是固定的，不能定制。

CSS gives you far greater control and provides an alternative until the W3C provide an official solution.

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

Example:

例子:

padding-left:4em

..or..

…或…

margin-left:4em

..as appropriate

. .适当的

It depends on which character set you want to use.

这取决于您希望使用哪个字符集。

You could set up some tab tags and use them similar to how you would use h tags.

您可以设置一些标签，并使用它们与如何使用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>

...and use them like so:

…像这样使用它们:

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

Run the snippet above to see a visual example.

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

Extra discussion

额外的讨论

There are no horizontal tabulation entities defined in ISO-8859-1 HTML, however there are some other white-space characters available than the usual &nbsp, for example;  , &ensp; and the aforementioned &emsp;.

在ISO-8859-1 HTML中没有定义横向制表实体，但是有一些其他空白字符可以使用，例如:&ensp ;和上述。

It's also worth mentioning that in ASCII and Unicode, 	 is a horizontal tabulation.

同样值得一提的是，在ASCII和Unicode中，是一个水平制表。

#5

Try &emsp;

试着

It is equivalent to four  s.

它相当于四秒。

#6

There really isn't any easy way to insert multiple spaces inside (or in the middle) of a paragraph. Those suggesting you use CSS are missing the point. You may not always be trying to indent a paragraph from a side but, in fact, trying to put extra spaces in a particular spot of it.

在段落内部(或中间)插入多个空格是不容易的。那些建议您使用CSS的人没有抓住要点。你可能并不总是试图从侧边缩进一个段落，但是，实际上，你是在它的某个地方添加额外的空格。

In essence, in this case, the spaces become the content and not the style. I don't know why so many people don't see that. I guess the rigidity with which they try to enforce the separation of style and content rule (HTML was designed to do both from the beginning - there is nothing wrong with occasionally defining style of an unique element using appropriate tags without having to spend a lot more time on creating CSS style sheets and there is absolutely nothing unreadable about it when it's used in moderation. There is also something to be said for being able to do something quickly.) translates to how they can only consider whitespace characters as being used only for style and indentation.

本质上，在这种情况下，空间成为内容而不是样式。我不知道为什么这么多人没有看到。我猜他们试图执行的刚性的风格和内容分离规则(HTML设计从一开始就做,没什么错偶尔的独特元素定义样式使用适当的标签,而不必花更多的时间在创建CSS样式表和绝对没有不可读的时候适量使用。还有一点需要说明的是，能够快速完成一些事情。

And when there is no graceful way to insert spaces without having to rely on &emsp; and   tags, I would argue that the resulting code becomes far more unreadible than if there was an appropriately named tag that would have allowed you to quickly insert a large number of spaces (or if, you know, spaces weren't needlessly consumed in the first place).

当没有优雅的方式插入空间而不需要依靠和,标签，我认为，生成的代码变得比如果有一个适当的命名标记，可以让您快速插入大量的空间(或者，如果，您知道，空间不是不必要地消耗在第一个地方)，会变得更加不容易。

As it is though, as was said above, your best bet would be to use &emsp; to insert in the correct place.

如前所述，你最好的选择是使用emsp;插入到正确的位置。

#7

I came across this while searching for a method and ended up figuring out my own that seems to work easily for what's wanted. I'm new to posting here so I hope this works... But have this in CSS:

我在寻找一种方法时遇到了这个问题，最后找到了我自己的方法，它似乎很容易满足人们的需求。我是新手，所以我希望这能奏效。但是在CSS中有这个:

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

Then in your HTML have this be your "long tab" in mid sentence like I needed:

然后在你的HTML，这是你的“长标签”，在句子中间，像我需要的:

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

Saves from the amount of   or &emsp; that you'd need.

节省或你所需要的。

Hope this helps someone, cheers!

希望这能帮助某人，干杯!

#8

It's better to use the pre tag. The pre tag defines preformatted text.

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

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

and line breaks.

</pre>

know more about pre tag at this link

了解更多关于预标签在这个链接

#9

&emsp;, &ensp;,   or   can be used.

& # 8195;或& # 8194;可以使用。

W3 says...

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.

#10

AFAIK, the only way is to use

唯一的办法就是使用

&nbsp;

If you can use CSS then you can use padding or margin. See Box model, and for Internet Explorer, also read Internet Explorer box model bug.

如果你可以使用CSS，那么你可以使用边距或边距。参见框模型，对于Internet Explorer，也要阅读Internet Explorer框模型错误。

#11

If whitespace becomes that important, it may be better to use preformatted text and the <pre> tag.

如果空格变得如此重要，那么最好使用预格式化的文本和

标记。

#12

The <tab> tag never made it into browsers, despite being introduced in HTML3. I've always thought it a real pity because life would be much easier in many circumstances if we had it available to us. But you can easily remedy this to give you a fake <tab> tag. Add the following in the head of your HTML or else (without the style tags) into your CSS:

尽管在HTML3中引入了标签，但它从未进入浏览器。我一直认为这是一个真正的遗憾，因为在许多情况下，如果我们有它，生活将会更容易。但是您可以很容易地对其进行补救，从而得到一个假的标记。在您的HTML或else(没有样式标签)的头部添加以下内容到您的CSS:

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

From then on, when you need a tab in your document put <tab> in there. It isn't a true tab because it doesn't align to tab-marks, but it works for most needs, without having to dither around with clumsy character entities or spans. It makes it really easy to check your source, and a cinch to format simple things where you don't want to go to the hassle of tables or other more complex "solutions".

从那时起，当您需要在文档中添加一个选项卡时，将 <选项卡> 放在其中。它不是真正的制表符，因为它不与制表符对齐，但它适用于大多数需要，不需要在笨拙的字符实体或跨度之间摇摆不定。它可以很容易地检查您的源代码，也可以很容易地格式化一些简单的东西，使您不想去麻烦的表格或其他更复杂的“解决方案”。

One nice aspect of this solution is that you can do a quick search/replace of a text document to replace all TABs with the <tab> tag.

这个解决方案的一个优点是，您可以快速搜索/替换文本文档，以标记替换所有选项卡。

You might be able to define a bunch of true absolute position TABs, then use the appropriate tab (e.g. <tab2> or <tab5> or whatever) where needed, but I haven't found a way to do that without it indenting subsequent lines.

您可能可以在需要的时候定义一组真正的绝对位置选项卡，然后使用适当的选项卡(例如或或其他)，但是我还没有找到一种方法来实现这一点，除非它对后续的行进行缩进。

#13

If you're looking to just indent the first sentence in a paragraph, you could do that with a small CSS trick:

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

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

#14

You can use a table and apply a width attribute to the first <td>.

您可以使用一个表并将width属性应用到第一个。

Code:

代码:

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

Result

结果

Content1       Content2
Content3       Content4

#15

I have used a span with in line styling. I have had to do this as I as processing a string of plain text and need to replace the \t with 4 spaces (appx). I couldn't use   as further on in the process they were being interpreted so that the final mark up had non-content spaces.

我用了一个带线样式的跨度。我必须在处理纯文本字符串时这样做，并需要用4个空格(appx)替换\t。我不能使用,在进一步的过程中，他们被解释，所以最后的标记有非内容的空间。

HTML:

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

I used it in a php function like this:

我在一个php函数中使用了它:

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

#16

If you needed only one tab, the following worked for me.

如果您只需要一个选项卡，下面的选项卡对我有效。

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

with the HTML something like:

HTML的内容如下:

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

You can add more "tabs" by adding additional "tab" styles and changing the HTML such as:

您可以添加更多的“选项卡”，添加额外的“选项卡”样式并更改HTML，例如:

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

with the HTML something like:

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

If you are using CSS, I would suggest the following:

如果您正在使用CSS，我建议如下:

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

p:首字母{ indent:1 em;}

This will indent the first line like in traditional publications.

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

#18

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

Consider it like this: one tab is equal to 64 pixels. So this is the space we can give by CSS.

可以这样考虑:一个选项卡等于64像素。这就是CSS的空间。

#19

I use a list with no bullets to give the "tabbed" appearance. (It's what I sometimes do when using MS Word)

我使用一个没有子弹的列表来显示“选项卡式”外观。(这是我在使用MS Word时有时会做的事情)

In the CSS file:

在CSS文件中:

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

And in the HTML file use unordered lists:

在HTML文件中使用无序列表:

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

The beauty of this solution is that you can make further indentations using nested lists.

这个解决方案的优点是，可以使用嵌套列表进行进一步的缩进。

A noob here talking, so if there are any errors, please comment.

这里没有人讲话，所以如果有任何错误，请评论。

#20

Well, if one needs a long whitespace in the beginning of one line only out of the whole paragraph, then this may be a solution:

如果一个人在一段话的开头需要一个很长的空格，那么这可能是一个解决方案:

<span style='display:inline-block;height:1em;width:4em;'>&nbsp;</span>

If that is too much to write or one needs such tabs in many places, then you can do this

如果写得太多或者在很多地方需要这样的标签，那么您可以这样做

<span class='tab'>&nbsp;</span>

Then include this into CSS:

然后将其包含到CSS中:

span.tab {display:inline-block;height:1em;width:4em;}

#21

You can also use:

您还可以使用:

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

And replace "p" with any other selector you have in mind.

用你想到的其他选择符替换p。

#22

Using CSS and best practice, the dynamic creation of nested, indented menus would be as follows:

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

Create a style for each nesting, such as indent1, indent2 etc, with each specifying its own left margin. Site structure should rarely go beyond three levels of nesting.
为每个嵌套创建样式，例如indent1、indent2等，每个嵌套都指定自己的左边缘。站点结构应该很少超过三个层次的嵌套。
Use a static variable (integer) within the self-recursive function to track the recursion.
使用自递归函数中的静态变量(integer)跟踪递归。
For each loop, append the loop number to the word indent, using server side scripting such as PHP or ASP, so that these menus are formatted appropriately by CSS.
对于每个循环，使用服务器端脚本(如PHP或ASP)将循环号附加到单词indent上，这样这些菜单就可以通过CSS进行适当的格式化。

Alternatively, loop through the static variable to add spacing using multiple   or <pre> tags, or other characters, as appropriate.

或者，循环通过静态变量来增加使用多个参数的间距。或 <预> 标签或其他字符，视情况而定。

From testing the horizontal tab character, 	 I found that it doesn't work as a replacement to multiple   in the scenario I described. You may have different results.

从测试水平标签字符，我发现它不能代替多重校验在我描述的场景中。你可能会有不同的结果。

#23

This is a bit of an ugly solution but you could just do this

这是一个有点难看的解决方案但是你可以这么做

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

And then use the tab variable in your strings.

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

#24

Only "pre" tag:

只有“前”标签:

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

You can apply any CSS class on this tag.

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

#25

I would simply recommend:

我只会推荐:

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

#26

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

<t>.</t>

Make sure the color code matches the background the px is variable to desired length for the tab.

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

Then add your text after the < t >.< /t >

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

The period is used as a space holder and it is easier to type, but the '& #160;' can be used in place of the period also making it so the color coding is irrelative.

句号被用作空格符，打字更容易，但“& #160;”也可以用来代替句号，因此颜色编码是不相关的。

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

<t>&#160;</t>

This is useful mostly for displaying paragraphs of text though may come in useful in other portions of scripts.

这对于显示文本段落非常有用，但是在脚本的其他部分可能会有用。

#27

CSS

CSS

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

HTML

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>

Rendered

呈现

#28

This is not a direct answer but I wanted to add a tab in Markdown document. I was drawing an object graph like this:

这不是直接的答案，但我想在Markdown文档中添加一个选项卡。我画了一个对象图

--Parent
    |
    + Child 1

Of course the easy way it to mark it as code by indenting by 4 spaces and is then treated as code in Markdown.

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

    --Parent
        |
        + Child 1

#29

we can use style="white-space:pre" like this:

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

the blank space inside is filled with tabs, the amount of tabs is depend on the text.

里面的空白被制表符填满，制表符的数量取决于文本。

it will looks like this:

它是这样的:

Text    : value
Text2   : value2
Text32  : value32

#30

The ideal CSS code that should be used should be a combination of "display" and "min-width" properties...

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