javascript - 如何在隐藏/显示跨度元素时保留固定宽度显示

Question

我正在使用 BioJS 中的一些代码我想扩展其中的功能。 BioJS 对象通过为每个字母创建一个单独的 span 元素并在 x 个字母后创建一个中断来形成序列显示(简化):

`   var j=1;
    for (var i=1; i <= a.length; i++) {

        if( i % opt.numCols == 0) {
            str += '<span class="sequence" id="' + this.getId() + '_' + i + '">' + a[i-1] + '</span>';

            str += '<br/>';

            j = 1;

        } else {
            str += '<span class="sequence" style="'+spaceStyle+'" id="' + this.getId() + '_' + i + '">' + a[i-1];
            str += ( j % opt.numColsForSpace == 0)? ' ' : '';
            str += (opt.spaceBetweenChars)? ' ' : '';
            str += '</span>';
            j++;
        }
    }`

这对于向特定坐标添加高亮显示的内置功能来说非常好，它只使用 jQuery 来查找适当的跨度并更改 css。我尝试采取类似的方法来隐藏元素，将其更改为 display:none ，但不幸的是，这留下了换行符，从而在文本中留下了大洞。在这里看一张图片: Showing/Hiding

我想知道是否有另一种方法可以创建类似的显示，使我可以在隐藏元素后保留固定宽度的输出。理想情况下，我仍然能够使用突出显示功能，但我也可以重新编码，以不同的方式工作。

Answer 1

我找到了问题的根源，即 BioJS 中的 javascript 添加了 whitespace: pre 的内联样式，这阻止了 span 元素在容器内换行。它导致包含元素仅在换行符处中断。