更改 CSS 中的制表符空格长度答案

【问题标题】：Change tab spaces length in CSS更改 CSS 中的制表符空格长度
【发布时间】：2012-01-08 23:30:33
【问题描述】：

我需要通过 CSS 将 8 个空格的选项卡（\t 键）的默认行为更改为 4 个空格。有可能吗？
如果没有，我可以用javascript模拟吗？有一些库或方法可以做到吗？

示例

发件人：

[tabtab][tabtab][tabtab]Hello World
[tabtab]  Hey!

改为：

[tb][tb][tb]Hello World
[tb]  Hey!

编辑

请注意：如果我在制表符之前有 1 到 3 个字符，则制表符将只占用 1 个空格，而不是 4 个。

H[tabtb]ello World! --will be--
H[t]ello World!

另一个例子，没有 [tab] 伪键：

TAB GRID
---4---8---4---8-...

H       ello World (1 tab key after H = 7 spaces, instead of 8) --will be--
H   ello World (1 tab key sized 4 will be 3 spaces because of H)

He      llo World
He  llo World

Hel     lo World
Hel lo World

Hell    o World
Hell    o World*

* 这个例子不会删除那个，只是发送到下一个block。

编辑 2

我向 Chrome 发布了一个问题：read here。

【问题讨论】：

重复？ stackoverflow.com/questions/667200/specifying-tab-width
请注意，制表符设置为距离，而空格则根据字体成比例。关于空格而不是制表符的唯一用途是程序员（以及其他使用等距字体的纯文本文档的顽固用户）。您确实应该使用设置为特定宽度的跨度，或设置边距或填充的 div 或 p 来模拟选项卡。
@MikkoOhtamaa 1/2 重复...另一篇文章想要 CSS 属性，我想要 CSS 或 JS 模式。 :)
你使用[tabtab]、[tb]、[tabtb]和[t]，我仍然不知道你在说什么。如果这些都是一样的，我建议\t 就可以了。
这是在哪个上下文中？我的意思是，很明显 CSS tab-size 属性不适合你，那么我们在这里看到什么样的环境？

标签： javascript css character

【解决方案1】：

div,p,span,textarea {
   -tab-size     : 3;
   -o-tab-size   : 3;
   -moz-tab-size : 3;
}

【讨论】：

嗯，我需要你在这里的建议。但它目前不适用于 Chrome。我需要一个 JS 解决方案。 @powers1 解决方案很好，但是有问题 (see this example)。
在没有前缀tab-size: 3;的chrome中使用

【解决方案2】：

这可以在 JavaScript 中通过将制表符转换为空格来完成，您可以控制每个制表符的空格数。与white-space 样式结合使用会使其工作。

JavaScript 看起来像这样：

function tabs2spaces(str, spaces) {
  return str.toString().replace(/\t/g, (new Array(spaces+1)).join(' '));
}
alert(tabs2spaces("\thello world\there\twe\tgo", 4));

【讨论】：