react-middle-ellipsis:在中间而不是结尾处截断一个长字符串

React中间椭圆 在长文本的末尾添加省略号很酷。 但不总是！ 有时文本的末尾包含重要信息，尤其是有关URL或文件名的信息。 这个React组件在设计时就考虑到了该用例。 安装 yarn add react-middle-ellipsis 用法 import ，您可以使用<MiddleEllipsis>包装任何节点。 这将计算周围父节点的宽度。 然后，它将查找子节点（因此请确保在内部最小添加一个span ）：它将使用此元素来计算子节点的宽度，然后缩短其类为ellipseMe （可选）的text元素以适合在父母之内。 如果调整了浏览器窗口的大小，该组件也会重新计算内容！ import React from "react" ; import MiddleEllipsis from "react-middle-ellipsis" ; const Component = props =>