Chrome无法使用CSS display：inline始终显示文本

2024-05-31 • 问答

几年来，我一直在使用越来越复杂的CSS，通常可以解决我的问题，但是这使我陷入困境。任务是能够显示已编辑的报价单（省略，注释，重点等），但允许用户以两种方式之一查看未编辑的文本：

在Chrome和Safari中，其中第一个有效，第二个无效。

以下是用户互动前报价的屏幕截图：

请注意本段开头的省略号“ [,The]”。这是JavaScript控制台的屏幕截图：

省略号的范围在左侧面板中突出显示。右侧的CSS将显示显示为嵌入式。下面的span显示为：none，当然在显示的段落中不可见。这是该范围的屏幕截图：

现在，如果用户单击省略号，则将看到以下内容：

省略号已替换为原始文本。请注意，其他编辑，注释和突出显示仍保留。这是两个范围的代码的屏幕截图：

两个跨度的显示属性符合预期。

但是，当用户单击段落底部的消息时，将显示以下内容：

请注意，突出显示和嵌入式注释已被删除。在段落开头也有省略号。但是省略号隐藏的原始文本不可见。 Chrome仍将其分配为display：inline。这是代码：

如果将其计算为display：none，我可以理解其隐身性。但是由于它是display：inline，就像单击省略号并显示一样，我很困惑。

感谢您的帮助。