Question

默认情况下，Chrome上的宽度似乎最多为8个空格。我正在使用代码编辑器，这有点多余。目前，我来了：

var pre1 = document.querySelector("#pre1");
var pre2 = document.querySelector("#pre2");
var pre3 = document.querySelector("#pre3");

pre1.innerHTML = `\ta\n \ta\n  \ta`;
pre2.innerHTML = pre1.innerText.replace(/\t/g, '<span class=sol1>\t</span>');
pre3.innerHTML = pre1.innerText.replace(/\t/g, '<span class=sol2>\t</span>');

pre {
  border:1px solid black;
  width:200px;
  height:100px;
  font-family:monospace;
}

.sol1 {
  font-size:50%;
}

.sol2 {
  font-size:50%;
  transform:scaleY(2);
  display:inline-block;
}

<pre id="pre1" contenteditable=true></pre>
<pre id="pre2" contenteditable=true></pre>
<pre id="pre3" contenteditable=true></pre>

第一个盒子是香草，宽8个空格

第二个框的字体大小设置为50％，有效地将选项卡的宽度设置为4个空格。但是，更改字体大小也会更改我不喜欢的插入符号大小。

在第三个框中，我尝试修复插入记号，但对跨度默认内联文本不起作用，因此将其更改为内联块。修复了插入符号，但是现在选项卡不再是动态的，并且采用了固定的宽度，因为它们单独位于文本块中，这违背了整个目的。

我已经以某种方式实现了文本拼接，在我注意到通过将选项卡包装在行内块中而失去了动态间距之前，在编辑器中将选项卡视为最多4个空格。

在这一点上，下一步将是实现自定义插入符号，而不是默认插入符号，但是为了避免自己这样做，是否有办法将\ t的最大间距更改为8以外的值？还是在插入符保持其内联文本的同时拉伸插入符？

在contenteditable pre中更改\ t的最大间距

0 个答案: