3个内联块的。我需要中间的一个来包围第一个额外的线

Posted 2021-04-10

在正常状态下，.attributes溢出设置为滚动，但如果用户单击省略号图标（第三个元素，实际上是<a>），它将设置.attribute white-space: normal并以多行显示全文。我试图这样做，以便当这发生时，属性环绕.attributeTitle。

我认为最好的方法是将属性放在attributeTitle上，然后简单地使用text-indent将第一行推到attributeTitle之后。我尝试使用position:absolute上的属性和position:relative在它的容器上，但我没有能够让它工作而不打破其他一切。

Here's a codepen

和代码本身：

$(document).ready(function() {
  $('#lookingToEllipsis').click(function() {
    $('#lookingToGroup').toggleClass('attributeGroupWrap');
    $(this.firstChild).toggleClass('fa-ellipsis-h');
    $(this.firstChild).toggleClass('fa-angle-up');
  });
  $('#instrumentsEllipsis').click(function() {
    $('#instrumentsGroup').toggleClass('attributeGroupWrap');
    $(this.firstChild).toggleClass('fa-ellipsis-h');
    $(this.firstChild).toggleClass('fa-angle-up');
  });
  $('#skillsEllipsis').click(function() {
    $('#skillsGroup').toggleClass('attributeGroupWrap');
    $(this.firstChild).toggleClass('fa-ellipsis-h');
    $(this.firstChild).toggleClass('fa-angle-up');
  });
  $('#genresEllipsis').click(function() {
    $('#genresGroup').toggleClass('attributeGroupWrap');
    $(this.firstChild).toggleClass('fa-ellipsis-h');
    $(this.firstChild).toggleClass('fa-angle-up');
  });
  $('#favoriteArtistsEllipsis').click(function() {
    $('#favoriteArtistsGroup').toggleClass('attributeGroupWrap');
    $(this.firstChild).toggleClass('fa-ellipsis-h');
    $(this.firstChild).toggleClass('fa-angle-up');
  });
});

.userStats {
  margin-top: .8rem;
  .attributeGroup {
    display: inline-block;
    white-space: nowrap;
    width: 98%;
    margin: 0 auto;
    padding: .25rem 0;
    &Wrap {
      white-space: normal !important;
    }
    .attributeTitle {
      display: inline-block;
      margin-right: .3rem;
      margin-bottom: 0;
      vertical-align: top;
    }
    .attributes {
      overflow: scroll;
      overflow-y: hidden;
      display: inline-block;
      vertical-align: top;
      margin-bottom: 0;
      line-height: 1.4;
      //text-indent: 50px;
      //position: absolute;
      &::-webkit-scrollbar {
        display: none;
      }
      &-lookingTo {
        width: calc(100% - 98px);
      }
      &-instruments {
        width: calc(100% - 107px);
      }
      &-skills {
        width: calc(100% - 62px);
      }
      &-genres {
        width: calc(100% - 74px);
      }
      &-favoriteArtists {
        width: calc(100% - 128px);
      }
    }
  }
}

<div class="small-4 column end profileInfo">
  <div class="userStats">
    <div id="lookingToGroup" class="attributeGroup">
      <p class="attributeTitle">Looking to:</p>
      <p class="attributes attributes-lookingTo">Jam, Collaborate</p><a id="lookingToEllipsis" class="ellipsisIcon"><i class="fa fa-ellipsis-h"></i></a>
    </div><br>
    <div id="instrumentsGroup" class="attributeGroup">
      <p class="attributeTitle">Instruments:</p>
      <p class="attributes attributes-instruments"><a>Violin</a>, Mandolin, <a>Piano</a></p><a id="instrumentsEllipsis" class="ellipsisIcon"><i class="fa fa-ellipsis-h"></i></a>
    </div><br>
    <div id="skillsGroup" class="attributeGroup">
      <p class="attributeTitle">Skills:</p>
      <p class="attributes attributes-skills"><a>Composition</a>, Improvisation, <a>Production</a>, Sound Design, Synthesis, Industry</p><a id="skillsEllipsis" class="ellipsisIcon"><i class="fa fa-ellipsis-h"></i></a>
    </div><br>
    <div id="genresGroup" class="attributeGroup">
      <p class="attributeTitle">Genres:</p>
      <p class="attributes attributes-genres"><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</p><a id="genresEllipsis" class="ellipsisIcon"><i class="fa fa-ellipsis-h"></i></a>
    </div><br>
    <div id="favoriteArtistsGroup" class="attributeGroup">
      <p class="attributeTitle">Favorite Artists:</p>
      <p class="attributes attributes-favoriteArtists">Talking Heads, The Grateful Dead, Medeski Martin & Wood, Ratatat, Prince, Phish, Béla Fleck & The Flecktones, A Tribe Called Quest, Soulive, Yonder Mountain String Band, Gorillaz, Creedence Clearwater Revival, STS9, The Band, Notorious B.I.G., Pink
        Floyd, Earth Wind & Fire, Red Hot Chili Peppers, Herbie Hancock, Daft Punk</p><a id="favoriteArtistsEllipsis" class="ellipsisIcon"><i class="fa fa-ellipsis-h"></i></a>
    </div>
  </div>
</div>

答案

使用：

text-indent: [size of .attributeTitle]