{"_id":"@b-design/ui-truncate","_rev":"9-560d3a4fc93ba662edece8f08299b658","name":"@b-design/ui-truncate","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@b-design/ui-truncate","version":"0.0.1","keywords":["b-design","b-design-rc-truncate","react","react component"],"author":{"name":"csr632","email":"632882184@qq.com"},"license":"MIT","_id":"@b-design/ui-truncate@0.0.1","maintainers":[{"name":"wangcherry","email":"wang_cherry0312@163.com"},{"name":"dhgalien","email":"dhg.isarobot@gmail.com"},{"name":"shaomingbo","email":"shaomingbo@hotmail.com"},{"name":"heimanba","email":"371510756@qq.com"},{"name":"xsahxl","email":"xsahxl@126.com"},{"name":"xxz_11","email":"2690067132@qq.com"},{"name":"chestnutpcj","email":"535961284@qq.com"},{"name":"luckydrq","email":"drqzju@gmail.com"}],"dist":{"shasum":"950983662767c6ccbf7e347c00d4acc55202dce6","tarball":"https://registry.npmjs.org/@b-design/ui-truncate/-/ui-truncate-0.0.1.tgz","fileCount":47,"integrity":"sha512-V9408Rb8vGB+jB/7azG4CsYhg6TNDbDGy6IisS8if/LKQ87bC8nOoWDOR6rSnYL51qaf5BoA+xe4aVCKzd1WJw==","signatures":[{"sig":"MEUCICzOT0b1Oz1hOaUcQNhnuxLJonm6A7/6dW5Ciipo8u+tAiEAkXLDHFI8HjDPIVebWt1lTH4rYO/orgNSzuICOk/Ogag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70998},"main":"lib/index.js","unpkg":"dist/index.js","module":"es/index.js","engines":{"node":">=7.6.0"},"scripts":{"dev":"breezr start --config config/breezr-docs.config.ts","test":"breezr test:unit","babel":"breezr build --engine babel","build":"breezr build --engine webpack","clean":"rm -rf dist lib es cc-dev-out","types":"tsc -p src --emitDeclarationOnly","upload":"breezr upload --config config/breezr-docs.config.ts","prepare":"npm run clean && npm run babel && npm run babel:esm && npm run types && npm run build","babel:esm":"breezr build --engine babel --es-module","doc:build":"rm -rf doc-dist && breezr build --config config/breezr-docs.config.ts","upload:pre":"npm run upload -- --tag=pre"},"typings":"lib/index.d.ts","_npmUser":{"name":"wangcherry","email":"wang_cherry0312@163.com"},"_npmVersion":"6.14.13","description":"React component for Alibaba Cloud.","directories":{},"_nodeVersion":"14.17.0","dependencies":{"lodash":"^4.17.15","classnames":"^2.2.5","react-sizeme":"^2.6.7","react-truncate-markup":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.x","react-dom":"^16.x","prop-types":"^15.x","@ali/breezr":"^1.5.41","@b-design/ui":"^2.0.0","styled-components":"^4.2.0"},"peerDependencies":{"react":"^16.x","react-dom":"^16.x","prop-types":"^15.x","@b-design/ui":"^2.0.0","styled-components":"^4.2.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-truncate_0.0.1_1636101909097_0.9415765142435051","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-11-05T08:45:09.043Z","modified":"2024-11-05T08:22:39.236Z","0.0.1":"2021-11-05T08:45:09.258Z"},"author":{"name":"csr632","email":"632882184@qq.com"},"license":"MIT","keywords":["b-design","b-design-rc-truncate","react","react component"],"description":"React component for Alibaba Cloud.","maintainers":[{"email":"dhg.isarobot@gmail.com","name":"dhgalien"},{"email":"tancawe@foxmail.com","name":"chvin"},{"email":"wang_cherry0312@163.com","name":"wangcherry"},{"email":"535961284@qq.com","name":"chestnutpcj"}],"readme":"# @b-design/ui-truncate\n\n用于截断超长文本。\n\n## 基本用法\n\n### 单行截断\n\n比较常见的使用方式：\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-truncate-docs&entryKey=basic)\n\n根据容器的宽度自动截断：\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-truncate-docs&entryKey=auto-width)\n\n在宽度截断模式下，可以截断任何可渲染元素，不只是 string：\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-truncate-docs&entryKey=non-string)\n\n可以自定义省略符号。不过注意，如果省略符号不是`...`的话，会在**宽度截断模式**下造成“字符在中间被截断”（在浏览器中没办法支持那么“智能”的截断）：\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-truncate-docs&entryKey=custom-omission)\n\n每当 children 变化的时候，Truncate 会自动检查是否需要截断：\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-truncate-docs&entryKey=dynamic-children)\n\n可以自定义 tootip 的 max-width：\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-truncate-docs&entryKey=tooltip-max-width)\n\n设置 tooltip 样式：\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-truncate-docs&entryKey=popupStyle)\n\n### 多行截断\n\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-truncate-docs&entryKey=multi-lines)\n\n想要做多行截断的时候，先考虑能否**通过普通的滚动来让用户浏览全部内容**。从用户体验的角度来看，后者的体验更好，无需使用多行截断。\n\n## APIs\n\n单行截断：\n\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-truncate-docs&entryKey=types/ITruncateProps)\n\n多行截断：\n\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-truncate-docs&entryKey=types/IMultiLinesProps)\n","readmeFilename":"README.md"}