javascript - 如何根据视口(viewport)大小和字体划分页面中的文本

Question

这有点棘手。基本上，我有一个水平 slider ，用于浏览通过 Ajax 实时填充的页面(预加载节流器、静默预加载等，所以在那一端一切都很好)。

如果有人还记得 FB 黑客杯的话，就像 Facebook Billboarding 一样工作，但略有不同。因此，我根据视口(viewport)计算 block 的大小，并得到 boxSizeX 和 boxSizeY。

现在服务器提供 X 个单词的文本。渲染使用 13px 字体大小的等宽字体。行高为 1 em，所以还是 13 px。基本上，我现在正在尝试将文本 block 分成完全适合 boxSizeX 和 boxSizeY 的 block ，而不会将单词分成两半，在最后两个单词之前结束句子(非常欢迎更多关于我应该注意什么的建议，因为我不想错过任何东西)。

整个计算是在 JS 中完成的，尽管 boxSize 可以在对文本进行初始调用时提供给服务器，以便在服务器端完成密集计算。你最好怎么做？我几乎不知道要注意什么、浏览器渲染问题、字体等。谢谢!

Answer 1

如果我对你的问题的理解正确，对于等宽字体，将字符串分成相等的两半并检查是否有断词是第一步——对吗？

这是将字符串分成两半的基本工作检查，将拆分词添加到前半部分，从后半部分删除它们，从拆分字符串的后半部分删除任何前导空格，并以两个字符串返回结果:

let str = "Works like Facebook Billboarding, if anyone remembers the FB hacker cup, yet slightly different. So I compute the size of the block based on the viewport and I get boxSizeX and boxSizeY.";
let halfway = Math.round(str.length/2);
let first_half = str.slice(0, halfway);
let second_half = str.slice(halfway);
let broken_word = second_half.indexOf(" ");
let orphan = (second_half.slice(0, broken_word));
first_half = first_half.concat(orphan);
second_half = second_half.slice(broken_word).trim()
console.log(first_half + " --halfway split here-- " + second_half)

您需要检查 first_half 的末尾或 second_half 的开头是否为空格，在这种情况下没有断词，因此您只需在该测试中运行 broken_word。

再做一些工作，您可以使用正则表达式并反转字符串，获取字符串前半部分最后一个句点之前的两个词:

const backwards = first_half.split("").reverse().join("");
z = (backwards.match(/(\.\S+\s\S+)/)[0]);
end_sentence = z.split("").reverse().join("");
console.log(end_sentence);

从那里您可以使用 backwards.indexOf(".") 或在 end_sentence 结束后拆分 first_half，然后对字符串的前半部分进行切片和连接以获得您想要的结果。