React js截断中间带有省略号的文本

Question

我找不到针对此问题的简单解决方案。我想截断中间带有省略号的文本。我发现模块 react-middle-ellipsis 有点工作，但存在将字符串缩短太多的问题以及文本在被截断之前仍然可以溢出它所在的元素（不超过一个字符）的问题。我想使用 /* ... */ do{ printf("counter=%d\n",counter); errno = 0; if(getline(&input,&size,stdin) < 0) { perror("getline"); if(errno == EINTR) { //clearerr(stdin); // clearing here would avoid the 2nd error return } else if(errno == 0) { clearerr(stdin); } else { return 2; } } /* ... */ 的接近替代方案，但仅在 Firefox 中受支持。到目前为止：

textOverflow: "some-dynamic-string"

正如我所说，这有点工作，但边缘情况，这对我来说至关重要，我无法解决问题。我试图为 import { makeStyles } from '@material-ui/core/styles'; import MiddleEllipsis from "react-middle-ellipsis"; import { Typography } from '@material-ui/core'; const useStyles = makeStyles({ tileHeader: { width: '80%', height: '30%' }) const Component = () => { const classes = useStyles(); return( <div className={classes.tileHeader}> <MiddleEllipsis><Typography variant="h4">some-very-long-text</Typography></MiddleEllipsis> </div>) } 设置填充，但这没有任何作用。 Firefox 的工作近似

tileHeader

对于 return( <div className={classes.tileHeader}> <Typography variant="h4" noWrap style={{ textOverflow: `"some-dynamic-string"`}}>some-very-long-text</Typography> </div>) 字符串，我希望它是 looooooooooooooooong 而不是上述模块所做的 loo...ong 字符串。边缘情况 1 - 可以通过从上述模块的 github 复制代码并自己调整来克服将字符串过短。边缘情况 2 - 不会很快截断 - 这意味着在调整窗口大小时，文本可以在被截断之前到达它溢出元素的位置。见图片 - 就在被模块截断之前：

更紧一点，它最终触发：