3 个内联块<p>。我需要中间的一条在第一条周围缠绕任何多余的线条

Question

在

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

我认为最好的方法是将属性放置在属性标题上，并简单地使用文本缩进将第一行推过属性标题。我尝试使用position:absolute对其容器的属性和position:relative，但我无法在不破坏其他所有内容的情况下使其工作。

这是一个代码笔

和代码本身：

$(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>

Answer 1

使用：

text-indent: [size of .attributeTitle]