【文件属性】：
文件名称：:scissors: 用于截断 JSX 标记的 React 组件
文件大小：392KB
文件格式：ZIP
更新时间：2021-06-08 15:57:59
React Libraries
React Truncate Markup 用于截断 JSX 标记的 React 组件。
代码片段示例 CodeSandbox 演示 为什么？
使用 JS 截断而不是 CSS 的用例很少：您需要支持 IE、Firefox 或 Edge（并且不能使用 webkit-line-clamp）进行多行截断，您需要一个自定义省略号，可能带有更多文本（显示更多链接，通过截断等方式隐藏了多少记录的指标。）大多数已经存在的解决方案（如 react-truncate 或 React-Text-Truncate）使用 HTML5 画布（及其 measureText 方法）来测量文本宽度以确定（和where) 提供的文本应该被截断。
虽然这种方法是有效的，但它有其局限性 - 它仅适用于纯文本，而不适用于 JSX 标记。
当部分文本具有不同的样式（如颜色或字体粗细）时，您可能希望使用 JSX。
如何？
因为我们需要确定如何在应用所有布局和样式后截断提供的内容，所以我们需要在浏览器中实际呈现它（而不是在画布中将其呈现在屏幕外）。
通过使用二进制搜索方法（将 JSX 分成两半并检查文本 + 省略号是否适合容器，如
【文件预览】：
react-truncate-markup-master
----.gitignore(125B)
----Dockerfile(592B)
----.sonarcloud.properties(421B)
----package.json(2KB)
----src()
--------tokenize-rules.js(280B)
--------index.js(14KB)
--------atom.js(258B)
----LICENSE.md(554B)
----.dockerignore(99B)
----.travis.yml(248B)
----CONTRIBUTING.md(2KB)
----nwb.config.js(270B)
----.github()
--------ISSUE_TEMPLATE()
----.prettierignore(106B)
----__tests__()
--------app()
--------screenshots()
--------utils.js(4KB)
--------.eslintrc.js(237B)
--------screenshot.js(1KB)
--------browser.js(10KB)
----.release-it.json(162B)
----.eslintrc.js(440B)
----README.md(9KB)
----demo()
--------src()
----prettier.config.js(203B)
----yarn.lock(413KB)
----index.d.ts(407B)