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元素在容器内包装。它导致包含元素仅在换行符时断开。

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

1 个答案: