Html 带省略号的溢出会破坏flex'；s儿童尺码

我以行的形式显示响应，每行是一个包含3个子项的flex容器，由

flex basis

属性分割。我给第一个孩子添加了一个文本，我想在其中使用省略号，以防它太长。但是，添加文本会扩展第一个flex子项，从而完全破坏视图（每行的大小不同，第二个和第三个子项并不直接位于彼此下方）。看起来文本长度会影响第一个子项的扩展程度

下面是代码的样子（或多或少）：

.parent flex{
显示器：flex；
证明内容：之间的空间；
对齐内容：居中对齐；
利润率：0.10px；
.child-1{
最小宽度：0；
显示器：flex；
弯曲方向：立柱；
弹性基准：45%；
}
.child-1-text{
显示器：flex；
柔性包装：nowrap；
}
.child-2{
最小宽度：0；
弹性基准：35%；
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
对齐内容：居中对齐；
}
.儿童-3{
最小宽度：0；
弹性基准：20%；
显示器：flex；
柔性包装：包装；
证明内容：柔性端；
对齐项目：柔性端；
弯曲方向：立柱；
}
}
.带省略号的文本{
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
}

文本附加文本
要用省略号缩短的文本。
X
更多的文字
...
...

您的CSS中有几个语法错误，我在下面修复了这些错误。这解决了元素超出flex basis设置的边界的问题

.parent flex{
显示器：flex；
证明内容：之间的空间；
对齐内容：居中对齐；
利润率：0.10px；
}
.child-1{
最小宽度：0；
显示器：flex；
弯曲方向：立柱；
弹性基准：45%；
}
.child-1-text{
显示器：flex；
柔性包装：nowrap；
}
.child-2{
最小宽度：0；
弹性基准：35%；
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
对齐内容：居中对齐；
}
.儿童-3{
最小宽度：0；
弹性基准：20%；
显示器：flex；
柔性包装：包装；
证明内容：柔性端；
对齐项目：柔性端；
弯曲方向：立柱；
}
.带省略号的文本{
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
}

文本附加文本
要用省略号缩短的文本。
X
更多的文字
...
...

您应该将

宽度

添加到带省略号的

.text

类中。我还用

width

和

max width

更改了

flex-basis

.parent flex{
显示器：flex；
证明内容：之间的空间；
对齐内容：居中对齐；
利润率：0.10px；
.child-1{
最小宽度：0；
显示器：flex；
弯曲方向：立柱；
宽度：45%；
最大宽度：45%；
}
.child-1-text{
显示器：flex；
柔性包装：nowrap；
}
.child-2{
最小宽度：0；
宽度：35%；
最大宽度：35%；
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
对齐内容：居中对齐；
}
.儿童-3{
最小宽度：0；
宽度：20%；
最大宽度：20%；
显示器：flex；
柔性包装：包装；
证明内容：柔性端；
对齐项目：柔性端；
弯曲方向：立柱；
}
}
.child-1.带省略号的文本{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
宽度：70%；
}

文本附加文本
要用省略号缩短的文本。
X
更多的文字
...
...

执行此操作。我使用了一个表而不是div，但是您必须自己添加类“.first、.second和.third”。UI非常相似，第三列自动调整大小

代码SNIPET如下所示

表格{
--第一：45vw；
/*第一列的宽度*/
--第二：20vw；
/*第二列的宽度*/
--第三：clac（abs（100vw-var（--first）-var（--second））；
/*第三列：自动调整大小*/
宽度：100%；
}
运输署{
文本对齐：左对齐；
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
}
.首先{
宽度：计算值（var（--第一）-16px）；
最大宽度：计算值（var（--first）-16px）；
}
.第二{
宽度：计算值（var（--秒）-16px）；
最大宽度：计算值（var（--秒）-16px）；
}
.第三{
宽度：calc（var（--third）-16px）；
最大宽度：计算值（var（--third）-16px）；
}

标题1
标题2
标题3
文本附加文本
更多的文字
虚拟文本
要用省略号缩短的文本
很高兴认识你
待会儿见

我现在唯一的解决方案是将带省略号的

文本的
宽度设置为定义的大小。我使用媒体查询来帮助它根据不同的屏幕大小进行放大和缩小。比如说：


。带省略号的文本{
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
宽度：500px；
@介质（最大宽度：1400px）{
宽度：400px；
}
}
我认为您所做的唯一更改是没有嵌套样式。我这样写的原因是因为我们使用更少的CSS而不是CSS。这段代码可能有用，但我并不认为这是解决方案。我注意到它没有那么简单。输出并不遥远，它解决了问题。也许我不太明白你在找什么？试着在
中插入一个长得多的带省略号的文本`你；I’我会注意到，有了这个更改，第一个flex子级也是g