[常用组件]文本省略 + Tooltip提示

很常用就对了

单行省略

.text {width: 100px;text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;
}

多行省略

.text{width: 100px;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}

兼容性较好,Chrome20以上基本都OK

兼容性查询：https://caniuse.com/?search=-webkit-box

判断文本是否溢出

node.clientWidth < node.scrollWidth     // 单行
node.clientHeight < node.scrollHeight  // 多行function isOverflowing(node: HTMLElement): boolean {if (!node) return false;const isSingleLine = node.offsetHeight === node.scrollHeight;if (isSingleLine) {return node.clientWidth < node.scrollWidth; // single line overflow} else {return node.clientHeight < node.scrollHeight; // multi-line overflow}
}

或者使用

function isSingleLineOverflowing(node: HTMLElement): boolean {if (!node) return false;const range = document.createRange();range.setStart(node, 0);range.setEnd(node, node.childNodes.length);const rangeWidth = range.getBoundingClientRect().width;return Math.round(rangeWidth) > node.offsetWidth;
}

溢出后文本省略 + 创建Tooltip

单行的

import { useState } from 'react';
import { Tooltip } from 'antd';const MyComponent = () => {const [tooltipVisible, setTooltipVisible] = useState(false);const handleTooltipVisibleChange = (visible: boolean) => {setTooltipVisible(visible);};const handleMouseEnter = (e: any) => {const el = e.currentTarget || e.target;const range = document.createRange();range.setStart(el, 0);range.setEnd(el, el.childNodes.length);const rangeWidth = range.getBoundingClientRect().width;const isOverflow = Math.round(rangeWidth) > el.offsetWidth;if (isOverflow && !tooltipVisible) {setTooltipVisible(true);}};const handleMouseLeave = () => {setTooltipVisible(false);};return (<><span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>My text here</span><Tooltiptitle={text || e.target.__text}visible={tooltipVisible}placement="top"style={{ maxWidth: '500px', wordBreak: 'break-all' }}getPopupContainer={() => document.body}destroyTooltipOnHide={true}zIndex={999999}onVisibleChange={handleTooltipVisibleChange}/></>);
};

多行的

import { useState } from 'react';
import { Tooltip } from 'antd';const MyComponent = () => {const [tooltipVisible, setTooltipVisible] = useState(false);const handleTooltipVisibleChange = (visible: boolean) => {setTooltipVisible(visible);};const determineOverflow = (el: HTMLElement) => {if (!el) return false;const isSingleLine = el.offsetHeight === el.scrollHeight;if (isSingleLine) {return el.clientWidth < el.scrollWidth; // single line overflow} else {return el.clientHeight < el.scrollHeight; // multi-line overflow}};const handleMouseEnter = (e: any) => {const el = e.currentTarget || e.target;const isOverflow = determineOverflow(el);if (isOverflow && !tooltipVisible) {setTooltipVisible(true);}};const handleMouseLeave = () => {setTooltipVisible(false);};return (<><span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>My text here</span><Tooltiptitle={text || e.target.__text}visible={tooltipVisible}placement="top"style={{ maxWidth: '500px', wordBreak: 'break-all' }}getPopupContainer={() => document.body}destroyTooltipOnHide={true}zIndex={999999}onVisibleChange={handleTooltipVisibleChange}/></>);
};