Como yo lo veo, el principal problema es mostrar el contenido de cada "línea de información" y que esta acción no afecte el ancho de su contenedor.
Teniendo esto en cuenta, una solución puede ser la siguiente:
Modificamos el HTML y para cada "línea de información" tenga un elemento con la clase .dots
Modificamos la regla .dots
para que:
- Esté en
position: absolute
: esto permite que al realizar hover
, mostrar el contenido sin afectar el ancho de sus contenedores.
- Tenga un
width: 100%
: esto permite que el overflow
funcione.
Cada contenedor del elemento .dots
debe tener:
- Tenga
position: relative
: para que el width
de .dots
funcione.
- Indicarle un
height
específico (esto puede ser considerada la desventaja de la solución): para evitar que se colapse.
Ejemplo:
.song__info {
width: 470px;
}
# Para que los elementos tengan el alto indicado
.song__info * {
box-sizing: border-box;
}
.song__info-up {
display: grid;
grid-template-columns: auto 1fr;
justify-content: start;
}
.song__ranking {
font-family: var(--number_font);
font-size: 4.5rem;
font-weight: bold;
color: var(--mid_color);
text-shadow: 5px 5px 4px var(--light_color);
margin: 0px 25px 0px 25px;
}
.song__rym-data {
margin-top: 2.5px;
}
.song__names {
height: 1.25rem;
}
.song__title {
font-style: italic;
}
.song__artist {
font-weight: bold;
}
.song__location {
height: 1.5rem;
margin-top: 2.5px;
}
.song__location-img {
vertical-align: middle;
margin-right: 2.5px;
}
.song__album {
height: 1.25rem;
margin-top: 2.5px;
}
.song__album-title {
font-style: italic;
}
.song__genres {
height: 1.25rem;
font-size: 1.15rem;
margin-top: 2.5px;
}
.song__genre {
text-decoration: none;
cursor: pointer;
}
.dots-cont {
position: relative;
}
.dots {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: absolute;
width: 100%;
}
.dots:hover {
z-index: 1;
overflow: visible;
width: auto;
}
<div class="song__info">
<div class="song__info-up">
<div class="song__ranking">1</div>
<div class="song__rym-data">
<div class="song__names dots-cont">
<div class="dots">
<a class="song__title ext-source-link">Luna park</a>
<span>de</span>
<a class="song__artist ext-source-link">…And You Will Know Us By The Trail of Dead</a>
</div>
</div>
<div class="song__location dots-cont">
<div class="dots">
<img class="song__location-img" width="18px" height="18px" loading="lazy" src="img/misc/world_icon.png" />
<span class="song__location-name">Austin (EEUU)</span>
</div>
</div>
<div class="song__album dots-cont">
<div class="dots">
<span>De su</span>
<span class="song__album-type">LP</span>
<span class="song__album-title">The century of self</span>
</div>
</div>
<div class="song__genres dots-cont">
<div class="dots">
<a class="song__genre badge badge--blue" href="#">Alternative Rock</a>
<a class="song__genre badge badge--blue" href="#">Indie Rock</a>
<a class="song__genre badge badge--blue" href="#">Post-Hardcore</a>
<a class="song__genre badge badge--blue" href="#">Progressive Rock</a>
</div>
</div>
</div>
</div>