README

Ellipsis 省略号

根据限宽截断文本并显示省略号，进而添加 Tooltip/Popover 悬停效果以显示完整文本。旨在解决根据字符长度截断时不能很好的兼容中英文的问题。

安装、发布与源码

安装：npm i @tntx/ellipsis
发布：https://www.npmjs.com/package/@tntx/ellipsis
源码：https://github.com/YuDGang/ellipsis-react/tree/master/src/components/Ellipsis

更新日志

1.0.13 修复了加载完成后、修改数据会导致Tooltip失效的问题，修复了动画闪动
1.0.12 上一版本中误删了原有的对自闭标签写法的支持，现已恢复
1.0.11 新增功能，前缀、后缀
1.0.10 提升兼容性；
1.0.9 优化svg引入方式，消除columns.fixed中的闪动；
1.0.2 新增功能，复制按钮；
1.0.1 新增功能，支持多行；
1.0.0 以CSS宽度溢出驱动截断的Ellipsis发布，支持单行;
...

API

兼容所有 Ant3 Tooltip/Popover 的参数；
您可以直接使用这些参数以配置溢出后的 Tooltip/Popover
此处仅列举笔者认为 Ant3 Tooltip/Popover 最常用的参数，完整参数请参考官方文档 | 参数 | 说明 | 类型 | 默认值 | | - | - | - | - | | placement | 气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom | string | top | arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | false | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true
|... |

除了支持 Ant3 Tooltip/Popover 参数以外，组件自带了一些实用的额外API：

参数	说明	类型
Popover	指定溢出后悬停卡片的类型为 `Popover`，不使用则为默认值 `Tooltip`
emptyText	文本为空时显示的字符	string
widthLimit	指定溢出宽度值，缺省则自适应为父元素width	number \| string
lines	指定多行截断的最大行数，可能在非Webkit内核浏览器中表现不稳定	number
copyable	显示复制按钮，缺省值为不显示，文本为空时亦不显示
suffix	后缀	string \| ReactNode \| () => ReactNode
prefix	前缀	string \| ReactNode \| () => ReactNode

其他参数

参数	说明	类型
title	当使用了 `Popover` 时，则用于指定卡片标题，否则用于指定卡片内容，可省略，缺省值为元素文本	string
content	当使用了 `Popover` 时，用于指定卡片内容，同Popover，可省略，缺省值为元素文本	string

何时使用

需要使文本元素在宽度溢出时显示省略号并添加悬停效果（Tooltip/Popover）时。

如何使用

支持 Popover 和 Tooltip 两种悬停效果，有什么区别?；
当选用 Popover 时，将需要展示的内容放在 content 里（如例1），并添加 Popover 属性；
当选用 Tooltip 时，将需要展示的内容放在 title （如例2）或包含在标签里（如例3）；

为什么不使用统一的属性传递展示的内容？因为 antd3 中的 Popover 和 Tooltip 的属性是有区别的， Popover 用 title 作卡片标题， content 作卡片内容，而 Tooltip 仅用 title 作卡片内容（形似 Html 的 title 属性），不支持标题功能；具体请参考 Ant3-Popover 和 Ant3-Tooltip
相应的，你可以直接使用Popover和Tooltip的API（如例4）；转换一下思维，你可以把它当作带有省略号、空文本、复制按钮 的强化版 Popover/Tooltip 使用；
利用好 emptyText 属性，在 Table 中直接作为 render 中的父元素（例6）；

根据需求添加下列选填项
添加 copyable 属性后，会在右侧添加一个复制按钮，
添加 lines 指定行数，仅在需要多行功能时使用，
添加 widthLimit 属性以增加限制宽度，若不添加则会自适应父元素宽度，
添加 emptyText 指定数据为空时的文本，例如 emptyText="- -"，则会在空数据时显示"- -"
添加 prefix/suffix 指定前/后缀

代码演示

import Ellipsis from "@tntx/ellipsis";

export default () => {
  <>
        {/* 例 1 */}
        <Ellipsis
            Popover
            widthLimit={100}
            content="你看我有省略号吗？"
        />
        
        <div style={{width: 100}}>

            {/* 例 2 */}
            <Ellipsis title="你看我有省略号吗？"/>

            {/* 例 3 */}
            <Ellipsis>
                你看我有省略号吗？
            </Ellipsis>
            
            {/* 例 4 */}
            <Ellipsis
                placement="topLeft"
            >
                你看我有省略号吗？
            </Ellipsis>
            {/* 例 5 添加前、后缀*/}
            <Ellipsis
                suffix={
                    <Tag color="#f50">#f50</Tag>
                }
                preffix="*"
            >
            </Ellipsis>
        </div>
    </>
};


{/* 例 6 */}
...
const columns = [
    {
        title: "详细内容",
        render: record => <Ellipsis
            title={record.description}
            emptyText="- -"	// 空数据时显示“- -”
            lines={3}
            copyable
        />
    }
    ...
]
...

Usage no npm install needed!