Question

我知道这个问题被问到了，但我找不到一个好的解决方案。课程user-info有两个直接孩子，inline-block显示，而子user-info-text有两个直接孩子display: block。当我为孩子们设置溢出和text-overflow: ellipsis时它不起作用。我知道溢出对内联元素不起作用。我怎样才能使它工作或为什么它不起作用？

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

来自MDN about text-overflow：

此属性仅影响在内联进程方向上溢出块容器元素的内容。

这意味着您应该将text-overflow属性应用于包含display: block的元素以剪切其内联内容，并使用width限制元素的display: block。

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

.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>

溢出隐藏不使用内联块父级

1 个答案: