Skip to main content
2 de 3
se añadieron 241 caracteres en el cuerpo

CSS: Truncado y revelado de textos sin utilizar un ancho máximo

Tengo el siguiente código:

.song__info {
    width: 470px;
}

    .song__info-up {
        display: grid;
        grid-template-columns: repeat(2, auto);
        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;
            overflow: hidden;
        }
        .song__rym-data:hover {
            overflow: visible;
            z-index: 1;
        }

            .song__names {
                -border: 2px dashed black;
            }
                .song__title {
                    font-style: italic;
                }
                .song__artist {
                    font-weight: bold;
                }

            .song__location {
                margin-top: 2.5px;
            }
                .song__location-img {
                    transform: translateY(-1.5px);
                    margin-right: 2.5px;
                }
                /*.song__location-name {

                }*/

            .song__album {
                margin-top: 2.5px;
            }
                /*.song__album-type {

                }*/
                .song__album-title {
                    font-style: italic;
                }

            .song__genres {
                margin-top: 2.5px;
                font-size: 1.15rem;
            }
                .song__genre {
                    text-decoration: none;
                    cursor: pointer;
                }
                                
.dots {
    text-overflow: ellipsis;
    white-space: nowrap; 
    overflow: hidden;
}
/*.dots:hover {
    overflow: visible;
    z-index: 1;
}*/
 <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">
                  <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 class="song__location 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 class="song__album dots">
                  <span>De su</span>
                  <span class="song__album-type">LP</span>
                  <span class="song__album-title">The century of self</span>
              </div>

              <div class="song__genres 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>

La clase .dots trunca los elementos HTML cuando su ancho es excesivo. Mi objetivo es que al hacer hover se revelen pero de forma individual. Tal y como está ahora el código, al pasar por encima de .song__rym-data se revelan todos a la vez. Quiero que al pasar por encima de .song__names se revele .song__names pero no .song__genres y viceversa (o cualquier otro elemento con la clase .dots si su ancho es excesivo; no es el caso para este ejemplo).

Si cada elemento con .dots tuviera un max-width serviría, pero es difícil determinarlo puesto que depende del ancho que tenga .song__ranking, que varía con su contenido -el número puede ir de 1 a 15-.