Skip to main content
se eliminaron 11 caracteres en el cuerpo
Origen Enlace
Marcos
  • 35.6k
  • 7
  • 36
  • 70
  • 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 unUn height específico (esto puedepudiendo ser considerada la desventajaesto considerado "la desventaja" de laesta solución): para evitar que se colapse.
  • 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.
  • Modificamos el HTML 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:

    • position: relative: para que el width de .dots funcione.
    • Un height específico (pudiendo ser esto considerado "la desventaja" de esta solución): para evitar que se colapse.
Origen Enlace
Marcos
  • 35.6k
  • 7
  • 36
  • 70

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>