2

这有点棘手。基本上，我有一个水平滑块，用于浏览通过 Ajax 实时填充的页面（预加载了节流器、静默预加载等，因此一切都很好）。

像 Facebook 广告牌一样工作，如果有人记得 FB 黑客杯，但略有不同。所以我根据视口计算块的大小，得到 boxSizeX 和 boxSizeY。

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

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

4

1 回答 1

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，然后对字符串的前半部分进行切片和连接以获得所需的结果。

于 2013-11-15T13:44:14.837 回答