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

How can I preserve fixed width display while hiding/showing span elements

本文关键字：显示 元素 保留 固定宽度 隐藏      更新时间：2023-09-26

我正在使用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，但不幸的是，这留下了行断，从而在文本中存在大洞。请看这里的图片：显示/隐藏

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

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

相关文章：