如何以相同的方式对齐文本而不考虑其中的 标签答案

【问题标题】：How to justify text in the same way regardless of tags inside it如何以相同的方式对齐文本而不考虑其中的 标签
【发布时间】：2023-02-25 09:25:34
【问题描述】：

我正在做一些需要在其下复制文本并在其中放置一些标签的东西（在我的例子中是）。有没有办法让标签不改变文本在容器内的对齐方式？

当我在这里简化问题时：

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
  </head>
<body>
    <div style="position: relative;">
    <div style="position: absolute; bottom: 0; top: 0; text-align: justify; white-space: pre-wrap; width: 800px; font-size: large;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div style="position: absolute; bottom: 0; top: 0; text-align: justify; white-space: pre-wrap; width: 800px; font-size: large; color:red;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <span style="color: blueviolet;">voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis</span> aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>

您可以看到这些文本未对齐，尽管它们是相同的（除了其中一个包含 ）。我可以做一些细微的修改（最好是 CSS）吗？

【问题讨论】：

这些包装对我来说是一样的：i.imgur.com/5JjyCSd.png。您的代码是否可能向 span 元素添加了任何填充或间距？
white-space: pre-wrap 将在开始标记之后直接导致空白，即呈现 Lorem 之前的 \n\t，如果您不希望这样做，则删除空白

标签： javascript html css text-align text-justify

【解决方案1】：

好吧……对我来说，这两个 div 似乎彼此对齐，并且它们都有文本对齐。要检查它，只需进入浏览器检查器并显示/隐藏所选的 div。我希望我没有误解你的问题。

【讨论】：