react判断文字是否被隐藏

1 分钟
25 阅读
react判断文字是否被隐藏
js 复制代码
const SalesChannelDescription = ({ salesChannel }) => {
	const spanRef = useRef<HTMLSpanElement>(null);
	const [isOverflowing, setIsOverflowing] = useState(false);
  
	useEffect(() => {
	  const el = spanRef.current;
	  if (el) {
		setIsOverflowing(el.scrollWidth > el.clientWidth);
	  }
	}, [salesChannel.description]);
  
	return (
	  <span
		ref={spanRef}
		className="text-small text-grey-50"
		title={isOverflowing ? salesChannel.description || '' : undefined}
		style={{
		  display: 'inline-block',
		  maxWidth: '100%',
		  whiteSpace: 'nowrap',
		  overflow: 'hidden',
		  textOverflow: 'ellipsis',
		}}
	  >
		{salesChannel.description}
	  </span>
	);
  };

评论

评论

发表评论