CSS Bootstrap flex width - 如何不通过太长的单行文本扩展父级？省略

Posted 2023-03-05

【中文标题】CSS Bootstrap flex width - 如何不通过太长的单行文本扩展父级？省略

【英文标题】：CSS Bootstrap flex width - how to not expand parent by too long oneline text? Ellipsis

【发布时间】：2022-01-17 16:40:47

【问题描述】：

​我遇到了一个关于 CSS 和 flexbox 的复杂问题。问题在于使用这些属性：

   ​text-overflow: ellipsis;
   ​white-space: nowrap;
   ​overflow: hidden;

但是如果文本太长，它会扩展我们的父组件宽度，而不是添加“...”和是的，我们可以设置手动宽度 父母的例如20% 或我们的孩子250px，但每个人都知道这是不好的解决方案（我知道，所以不要减去我，我在网上没有找到任何正确的答案）。

【问题讨论】：

添加正确答案或删除问题但不要将其标记为“已解决”

【参考方案1】：

所以经过几个小时并向我的高级开发人员寻求帮助后，他添加到子类：

flex-basis: 0;
flex-grow: 1;

但问题仍然存在，最后的添加只是一个简单的：

   width: 0;

父母是这样的：

   <div class="flex">

现在孩子是：

    <div ng-if="value.LongText" class="flex-row">
        <span class="child-class" title="::value.LongText">::value.LongText</span>
    </div>