在CSS中更改制表符空格长度

Question

1. 我需要通过CSS将制表符（\t键）的默认行为从8个空格改为4个空格。这是否可能？

2. 如果不行，我可以用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*

* 这个例子不会删除that，只会发送到下一个 块。

编辑2

我向Chrome提交了一个问题：在这里阅读。

- David Rodrigues

---

重复？https://dev59.com/N3RB5IYBdhLWcg3wSVm1这句话是一个链接，指向一个名为“specifying-tab-width”的问题页面。无法提供更多信息。 - Mikko Ohtamaa

请注意，制表符是设置为一定的间距，而空格则是根据字体成比例的。空格代替制表符的唯一用途是供程序员（以及其他热衷于使用等宽字体纯文本文档的用户）使用。您应该真正使用一个具有特定宽度的span，或者是带有设置了边距或填充的div或p来模拟制表符。 - RobG

你使用 [tabtab]、[tb]、[tabtb] 和 [t]，但我仍然不知道你在说什么。如果它们都是相同的东西，我建议只用 \t 就可以了。 - vol7ron

这是在哪个上下文中？我的意思是，很明显CSS的tab-size属性不能为您完成工作，那么我们正在寻找什么样的环境呢？ - Mr Lister

@vol7ron 我猜他的意思是用 [tabtab] 表示 8 个空格的制表符，用 [tb] 表示 4 个空格的制表符。不过他最后的编辑对我来说也没有意义。 - Mr Lister

Answer 1

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

- vol7ron

---

好的，我需要你在这里建议的确切内容。但目前它在Chrome上无法工作。我需要一个JS解决方案。@powers1的解决方案很好，但是有缺陷（请参见此示例）。 - David Rodrigues

在Chrome中使用时不要加前缀tab-size: 3;。 - Savrige

Answer 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));

- leepowers