Html 设置flex容器中文本的省略号

是否有任何方法可以使以下HTML行为正常：

文本垂直居中对齐

文本为单行，并用…截断。。。（省略）

我可以得到1或2，但不能两者都得到

请注意，HTML无法修改，它是由第三方库生成的。我们只能更改css

.target{
宽度：300px；
高度：50px；
边框：实心1px红色；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
显示：flex；/*更改为块以显示省略号*/
对齐项目：居中；
}

此处的文本非常长，如果此框的大小调整得太小，它可能会被截断

省略号需要设置在文本元素上，而不是容器上：

.target{
显示器：flex；
对齐项目：居中；
宽度：300px；
高度：50px；
边框：实心1px红色；
空白：nowrap；
}
跨度{
溢出：隐藏；
文本溢出：省略号；
}

此处的文本非常长，如果此框的大小调整得太小，它可能会被截断