html - 隐藏的溢出不适用于内联 block 父级

Question

我知道有人问过这个问题，但我找不到好的解决方案。 类 user-info 有两个带有 inline-block 显示的直接子级，而子级 user-info-text 有两个带有 的直接子级显示: block 。当我将溢出和 text-overflow: ellipsis 设置为子项时，它不起作用。我知道溢出不适用于内联元素。 我怎样才能让它工作或者为什么它不工作？

.profile__dropdown {
    position: absolute;
    right: auto;
    margin-top: 15px;
    top: 30px;
    left: 50px;
    z-index: 100;
    padding-left: 5px;
    width: 180px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(0,0,0,0.1);
}
.avatar {
    display: inline-block;
    overflow: hidden;
    line-height: 1;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 5px;
}
.avatar--circle {
    height: 30px;
    width: 30px;
    background: #ddd;
}
.avatar--md {
    height: 45px;
    width: 45px;
}
.user-info>* {
    display: inline-block;
    vertical-align: middle;
}
.user-info-text {
    padding-left: 4px;
}
.user-info-text>* {
    display: block;
}
.profile__info a, 
.profile__info span, 
.profile__info li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile__dropdown li {
    display: block;
    overflow: hidden;
    color: #777;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    float: initial;
}
.profile__info a {
    padding: 0;
    width: 100%;
    height: initial;
}
.profile__detail a {
    display: block;
    padding: 0 8px;
    font-weight: 600;
    color: rgba(0,0,0,0.5);
    height: 30px;
}
.profile__wrapper li {
    float: left;
    position: relative;
}
.profile__dropdown li.separate {
    margin: 4px 0 0 0;
    border-top: 1px solid rgba(0,0,0,0.075);
}
.profile__dropdown li a, .user-info {
    padding: 4px 10px 4px 15px;
}

<ul class="profile__dropdown">
    <li class="user-info">
        <div class="avatar avatar--circle avatar--md"></div>
        <div class="user-info-text"><span>John Joe adfasdfadfadsf</span><span>0011026184</span></div>
    </li>
    <li class="separate"><a href="#">Settings adfadfasdfasdfdsfadsf</a></li>
    <li><a href="#">Logout</a></li>
</ul>

Answer 1

来自MDN about text-overflow :

This property only affects content that is overflowing a block container element in its inline progression direction.

这意味着您应该将 text-overflow 属性应用于具有 display: block 的元素以剪辑其内联内容，并限制宽度 具有 display: block 的元素。

在代码片段中，您可以将 max-width 添加到 .user-info 和 overflow: hide + text- Overflow: ellipsis + white-space: nowrap 到 .user-info-text 的子 block :

.profile__dropdown {
    position: absolute;
    right: auto;
    margin-top: 15px;
    top: 30px;
    left: 50px;
    z-index: 100;
    padding-left: 5px;
    width: 180px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(0,0,0,0.1);
}
.avatar {
    display: inline-block;
    overflow: hidden;
    line-height: 1;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 5px;
}
.avatar--circle {
    height: 30px;
    width: 30px;
    background: #ddd;
}
.avatar--md {
    height: 45px;
    width: 45px;
}
.user-info>* {
    display: inline-block;
    vertical-align: middle;
}
.user-info-text {
    padding-left: 4px;
    max-width: 100px;
    box-sizing: border-box;
}
.user-info-text>* {
    display: block;
}
.user-info-text>*,
.profile__info a, 
.profile__info span, 
.profile__info li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile__dropdown li {
    display: block;
    overflow: hidden;
    color: #777;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    float: initial;
}
.profile__info a {
    padding: 0;
    width: 100%;
    height: initial;
}
.profile__detail a {
    display: block;
    padding: 0 8px;
    font-weight: 600;
    color: rgba(0,0,0,0.5);
    height: 30px;
}
.profile__wrapper li {
    float: left;
    position: relative;
}
.profile__dropdown li.separate {
    margin: 4px 0 0 0;
    border-top: 1px solid rgba(0,0,0,0.075);
}
.profile__dropdown li a, .user-info {
    padding: 4px 10px 4px 15px;
}

<ul class="profile__dropdown">
    <li class="user-info">
        <div class="avatar avatar--circle avatar--md"></div>
        <div class="user-info-text"><span>John Joe adfasdfadfadsf</span><span>0011026184</span></div>
    </li>
    <li class="separate"><a href="#">Settings adfadfasdfasdfdsfadsf</a></li>
    <li><a href="#">Logout</a></li>
</ul>

此外，您可以尝试使用 display: table-cell + max-width: 0 hack，但随后您必须向 HTML 添加额外的包装器。

查看下面的代码片段，我添加了 .user-info__cell 元素:

.profile__dropdown {
    position: absolute;
    right: auto;
    margin-top: 15px;
    top: 30px;
    left: 50px;
    z-index: 100;
    padding-left: 5px;
    width: 180px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(0,0,0,0.1);
}
.avatar {
    display: inline-block;
    overflow: hidden;
    line-height: 1;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 5px;
}
.avatar--circle {
    height: 30px;
    width: 30px;
    background: #ddd;
}
.avatar--md {
    height: 45px;
    width: 45px;
}
.user-info>* {
    display: inline-block;
    vertical-align: middle;
}
.user-info__cell {
    display: table-cell;
    width: 1%;
}
.user-info__cell--text {
    max-width: 0;
    width: 100%;
}
.user-info-text {
    padding-left: 4px;
}
.user-info-text>* {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile__dropdown li {
    display: block;
    overflow: hidden;
    color: #777;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    float: initial;
}
.profile__info a {
    padding: 0;
    width: 100%;
    height: initial;
}
.profile__detail a {
    display: block;
    padding: 0 8px;
    font-weight: 600;
    color: rgba(0,0,0,0.5);
    height: 30px;
}
.profile__wrapper li {
    float: left;
    position: relative;
}
.profile__dropdown li.separate {
    margin: 4px 0 0 0;
    border-top: 1px solid rgba(0,0,0,0.075);
}
.profile__dropdown li a, .user-info {
    padding: 4px 10px 4px 15px;
}

<ul class="profile__dropdown">
    <li class="user-info">
        <div class="user-info__cell">
            <div class="avatar avatar--circle avatar--md"></div>
        </div>
        <div class="user-info__cell user-info__cell--text">
            <div class="user-info-text">
                <span>John Joe adfasdfadfadsf</span>
                <span>0011026184</span>
            </div>
        </div>
    </li>
    <li class="separate"><a href="#">Settings adfadfasdfasdfdsfadsf</a></li>
    <li><a href="#">Logout</a></li>
</ul>