如何防止添加的“列”样式属性在 Safari 10 中剪切文本？

Posted 2023-02-24

【中文标题】如何防止添加的“列”样式属性在 Safari 10 中剪切文本？

【英文标题】：How can I prevent an added "columns" style property from cutting text in Safari 10?

【发布时间】：2016-09-26 21:17:23

【问题描述】：

在 Safari 10.0 中，我发现了一个错误：页面加载后，如果我将 style="columns: 2" 添加到带有文本的 html 元素中，则一行文本有时会被分成两段。

如果您单击“运行”并使用窗口大小播放，您还可以在 Safari 10.0 中看到此 JSFiddle 的问题：https://jsfiddle.net/az1so91v/2/

我的网络应用程序需要在页面呈现后设置此类列。如何防止文字被截断？

【参考方案1】：

在你的容器上试试这个

-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;

【讨论】：

这似乎不起作用。 （如果我将它应用于p 元素，它在技术上确实有效，但是它避免了在列之间打断段落，并且我想要打断列之间的段落，就像一本书一样。）跨度>

【参考方案2】：

我希望得到更好的答案，但我会分享我为解决这个问题所做的工作。

我怀疑强制 Safari 重新渲染文本可能会导致重新计算列高，因此我尝试在设置列后将填充更改一个不明显的量，并且它起作用了。我现在正在做的是在设置列后立即在p 元素上设置padding-left: 0.00001px，然后使用window.setTimeout 设置回padding-left: 0。

这个 JSFiddle 演示了我的解决方案：https://jsfiddle.net/q7washrL/1/