javascript - 使用 React 将文本分割成行以实现动画目的

Question

我正在尝试创建一个函数，它接受一个字符串并将其拆分为单独的行，以便每个“行”都适合引用容器而不换行。稍后我将使用此输出来为每行显示设置动画。

目前我正在使用这个库，但我遇到了一些问题，所以我要构建自己的解决方案。

图书馆: https://cyriacbr.github.io/react-split-text/

https://github.com/CyriacBr/react-split-text

我的问题:

• 它会在视口(viewport)高度发生变化后触发重新渲染(在移动设备上，每次弹出浏览器菜单时都会触发重新渲染)
• 它根据单跨度宽度测量线宽，但我使用的是非单型字体，因此它不准确并会导致奇怪的问题

我的想法是制作一个组件(或钩子(Hook))，它接受一个字符串，并返回行数组(字符串)。

它会像这样工作:

• 将文本拆分为单词
• 渲染 Ghost 组件中的每个单词，以便我能够通过添加引用来测量每个单词
• 测量容器宽度
• 将单词分组到“行”数组中，这些“行”数组可以放入容器中而无需换行。

到目前为止，我已经想出了这个解决方案:
https://codesandbox.io/s/buggy-line-splitter-c2j7b

它有点工作，但有问题。

我的解决方案存在的问题:

• 我的行比应有的宽，文本换行，但它不应该换行。

• 我可以通过将容器宽度乘以 0.9 来“解决”上述问题，但我觉得它迟早会崩溃。

您对如何改进我的解决方案有什么想法吗？ 谢谢

/////////////////////////////////////////////////////////////////////////////////////////

我找到了问题的答案!

扩展@Will的想法，有解决问题的线索:

Weird issue with styles and element measurement (scrollWidth / scrollWidth) in Gatsby

Answer 1

离开this answer ，您可以创建一个 div 并将文本放入其中，检查滚动宽度与客户端宽度的比较。当它溢出时，隐藏之前测试的文本(没有溢出)并开始一个新行。

更聪明的人可能会重写它以使用更少的数组，但将一段文本分割成适合的行似乎是可行的。根据需要使用填充等设置样式，以使其适合您最终制作动画的内容。

const input = "I'm baby kickstarter authentic kinfolk PBR&B post-ironic live-edge readymade truffaut tousled activated charcoal etsy. Schlitz marfa yuccie heirloom yr, cornhole single-origin coffee master cleanse fixie tumblr street art edison bulb shoreditch. Keytar tousled hell of, XOXO selfies vegan hot chicken keffiyeh sriracha roof party jean shorts activated charcoal. Readymade flexitarian tbh, iceland health goth poutine wolf 8-bit put a bird on it street art vice mixtape kickstarter. Viral messenger bag kale chips sriracha chillwave.".split(" ");

const testEl = document.getElementById("test");
testEl.style.width = "200px"; // <-- desired width

let line = [];
let testLine = [];
let output = [];

input.forEach(word => {
  testLine.push(word);
  testEl.innerHTML = testLine.join(" ");
  if (testEl.scrollWidth > testEl.clientWidth) {
    output.push(line.join(" "));
    testLine = [];
    line = [];
  }
  line.push(word);
});

console.log(output);

#test {
  display: hidden;
  height: 0;
  overflow-x: scroll;
  white-space: nowrap;
}

<div id="test" />