npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tntx/ellipsis

v1.0.13

Published

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

Downloads

8

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)时。

如何使用

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

  • 为什么不使用统一的属性传递展示的内容? 因为 antd3 中的 PopoverTooltip 的属性是有区别的, Popovertitle 作卡片标题, content 作卡片内容,而 Tooltip 仅用 title 作卡片内容(形似 Html 的 title 属性),不支持标题功能;具体请参考 Ant3-PopoverAnt3-Tooltip
  • 相应的,你可以直接使用PopoverTooltip的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
		/>
	}
	...
]
...