Pomoc w programowaniu, odpowiedzi na pytania / Html / Overflow hidden nie działa z rodzimym blokiem rodzica - html, css, overflow

Przepełnienie ukryte nie działa z rodzimym blokiem nadrzędnym - html, css, overflow

Wiem, że to pytanie zostało zadane, ale nie mogłem znaleźć dobrego rozwiązania. Klasa user-info ma dwoje bezpośrednich dzieci inline-block wyświetlacz i dziecko user-info-text ma dwoje bezpośrednich dzieci display: block. Kiedy ustawię zarówno przepełnienie, jak i text-overflow: ellipsis dla dzieci to nie działa. Wiem, że przepełnienie nie działa dla elementów wbudowanych. Jak mogę sprawić, aby działało lub dlaczego nie działa?

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

Odpowiedzi:

2 dla odpowiedzi № 1

Od MDN o text-overflow:

Ta właściwość wpływa tylko na zawartość, która przepełnia blokowy element kontenera w jego inline kierunek postępu.

Oznacza to, że powinieneś złożyć wniosek text-overflow właściwość elementu display: block aby przyciąć jego zawartość inline, a także ograniczyć width elementu z display: block.

W swoim fragmencie kodu możesz dodać max-width do .user-info i overflow: hidden + text-overflow: ellipsis + white-space: nowrap do .user-info-text„bloki potomne:

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

Możesz także spróbować użyć display: table-cell + max-width: 0 hack, ale potem będziesz musiał dodać dodatkowe opakowania do swojego HTML.

Zobacz fragment poniżej, dodałem .user-info__cell elementy:

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