html – CSS：display：inline-flex和text-overflow：省略号不能

发布时间：2020-12-14 23:51:49 所属栏目：资源来源：网络整理

导读：我有一个跨度.我需要下面提到的两种风格.但随着显示：inline-flex,文本溢出：省略号不起作用. .ed-span{ display: inline-flex!important; text-overflow: ellipsis; } 当我将inline-flex更改为内联块时,它正在工作.但我需要inline-flex. 我怎样才能让它发挥

我有一个跨度.我需要下面提到的两种风格.但随着显示：inline-flex,文本溢出：省略号不起作用.

.ed-span{
   display: inline-flex!important;
   text-overflow: ellipsis;
 }

当我将inline-flex更改为内联块时,它正在工作.但我需要inline-flex.

我怎样才能让它发挥作用？

请帮忙,
谢谢.

解决方法

我遇到了同样的问题.你要做的是将文本放在另一个具有溢出样式的div中. inline-flex不支持文本溢出,如下所示： https://bugzilla.mozilla.org/show_bug.cgi?id=912434

这应该工作：

<div class="parent-div">
    <div class="text-div">
    Ellipsis' are cool.
    </div>
</div>

text-div样式的位置如下：

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

和父母div：

.parent-div {
    display: inline-flex;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!