:scissors: 用于截断 JSX 标记的 React 组件

时间:2024-06-28 09:44:39
【文件属性】:

文件名称::scissors: 用于截断 JSX 标记的 React 组件

文件大小:392KB

文件格式:ZIP

更新时间:2024-06-28 09:44:39

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)

网友评论