溢出：隐藏导致内容布局问题

Question

我正在尝试为我的网站创建一个漂亮的文本淡出效果。我遇到的问题是由overflow：hidden的用户引起的。

这是我的codepen演示了这个问题：

https://codepen.io/camerongray6692/pen/zWBqZP

要满足'codepen链接必须附带代码......'规则：

HTML：

<div class="container">
  <div class="row">
      <h1>Test Heading</h1>
  <img src="https://i.imgur.com/5HEZhk0.png" class="imageReplacement"/>
  <div class="sectionSubheadings">
    <h3 class="test-subheading">This is test text. This is test text. </h3>
    <h3 class="test-subheading">This is test text. This is test text. This is test text.</h3>
    <h3 class="test-subheading">This is test text.</h3>
  </div>
  <div class="special-text">
    <p>
     Suspendisse vel vehicula metus, et tincidunt ex. Nulla egestas cursus accumsan. In vitae egestas felis, id dignissim dui. Etiam scelerisque luctus imperdiet. Duis at mattis tortor. Nam at vulputate lorem. Donec hendrerit tempor pharetra. Nulla efficitur ipsum a lorem faucibus pharetra quis id ante. Sed magna turpis, efficitur vitae fringilla dictum, sollicitudin eget erat. Etiam bibendum sed nunc nec gravida.
    </p>
    <p>
      Quisque pretium lorem molestie lectus mattis ullamcorper. Donec lacinia consequat est nec tempus. Praesent et vehicula lacus. Vivamus arcu ex, vehicula ac diam sit amet, ullamcorper imperdiet leo. Donec pellentesque augue eget molestie pulvinar. Fusce et auctor urna. Vestibulum a fringilla orci.
    </p>
    <p>
      In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.
    </p>
    <p>
     Sed et lorem lobortis, varius est eu, molestie dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc consequat ut dolor sit amet vestibulum. Integer commodo laoreet turpis eu suscipit. Etiam vehicula ex id nibh vulputate vulputate. Suspendisse potenti. Ut ac nisl sed purus hendrerit condimentum.
    </p>
    <p>
      In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.
    </p>
  </div>
  <button class="expand-button">
    Continue Reading
  </button>

CSS：

.imageReplacement {
  background-color: red;
  width:225px;
  height:225px;
  float: right;
  margin-left: 25px;
}

.test-subheading {
  margin: 0;
  padding: 2px 0;
}

.container {
  width: 1000px;
}

.special-text {
  position: relative;
  max-height: 75px;
  overflow: hidden;
  transition: max-height .5s ease;
   }

.special-text.-expanded {
  max-height: 1500px;
}

.special-text:not(.-expanded)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.special-text > p {
  font-size: 16px;
  margin-top: 15px;
}

jQuery的：

$(".expand-button").on("click", function() {

  $(".special-text").toggleClass("-expanded");

  if ($(".special-text").hasClass("-expanded")) {
    $(".expand-button").html("Collapse Content");
  } else {
    $(".expand-button").html("Continue Reading");
  }
});

这与我想要的效果非常接近，但是我无法找到一种方法来获取图像后出现的文本并使用图像下方的空间。

如果我设置溢出：隐藏到可见，文本将按预期包装。但是，单击“折叠内容”时文本不会消失。我尝试在特殊文本div周围创建一个包装器，并将overflow-x设置为visible，并将overflow-y设置为隐藏在特殊文本div上，但它的行为就像溢出设置为隐藏一样。

将-expanded类添加到特殊文本后，尝试更改溢出会导致内容在动画期间以非常不稳定的方式移动。

如果有人能就如何实现这一点提供一些指导，那就太棒了。

Answer 1

确定经过大量的追踪和错误，这是我发现完全按照你想要的方式进行的唯一方式

在这里https://codepen.io/anon/pen/BrzpgY

这不是那么灵活，因为你必须在容器上定义一个最大高度，它必须足够高以显示图像，但不能太高以至于显示太多文本。

这里的主要问题是你试图以不自然的方式展示这个内容的工作方式。您希望图像显示哪些意味着它需要在内容之外，如果它在外部，那么浮动图像不会让您的文本换行，因为文本在块元素中。元素必须保持阻塞，因为您需要为动画赋予最大高度。

我们无法在展开时设置溢出，因为它的作用是它只是立即显示内容，这就是为什么你在文本前面看到那个按钮，因为文本只会显示，动画在此无用点。

虽然以下代码有效，但它不是动态的。我强烈建议你在某个地方做出妥协，要么把图像放在文本中，要么将淡入淡出隐藏在图像的一部分，要么像你一样在左侧显示文字。唯一的另一个选择是使用js计算点击高度然后设置一堆东西，但我真的认为这是过于复杂的

＆＃13;

＆＃13;

$(".expand-button").on("click", function() {

  $(".row").toggleClass("-expanded");

  if ($(".row").hasClass("-expanded")) {
    $(".expand-button").html("Collapse Content");
  } else {
    $(".expand-button").html("Continue Reading");
  }
});

＆＃13;

.imageReplacement {
  background-color: red;
  width:225px;
  height:225px;
  float: right;
  margin-left: 25px;
  position: relative;
  z-index: 1;
}

.test-subheading {
  margin: 0;
  padding: 2px 0;
}

.container {
  width: 1000px;
}

.row {
  position: relative;
  max-height: 320px;
overflow: hidden;
  transition: max-height .5s ease;
}

.row.-expanded {
  max-height: 1500px;
}

.row:not(.-expanded) .row-content::after {
  content: '';
  position: absolute;
  top: 200px;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.special-text > p {
  font-size: 16px;
  margin-top: 15px;
}

button {
  position: absolute;
  bottom: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="row-content">
      <h1>Test Heading</h1>
      <img src="https://i.imgur.com/5HEZhk0.png" class="imageReplacement"/>
      <div class="sectionSubheadings">
        <h3 class="test-subheading">This is test text. This is test text. </h3>
        <h3 class="test-subheading">This is test text. This is test text. This is test text.</h3>
        <h3 class="test-subheading">This is test text.</h3>
      </div>

        <p>
         Suspendisse vel vehicula metus, et tincidunt ex. Nulla egestas cursus accumsan. In vitae egestas felis, id dignissim dui. Etiam scelerisque luctus imperdiet. Duis at mattis tortor. Nam at vulputate lorem. Donec hendrerit tempor pharetra. Nulla efficitur ipsum a lorem faucibus pharetra quis id ante. Sed magna turpis, efficitur vitae fringilla dictum, sollicitudin eget erat. Etiam bibendum sed nunc nec gravida.
        </p>
        <p>
          Quisque pretium lorem molestie lectus mattis ullamcorper. Donec lacinia consequat est nec tempus. Praesent et vehicula lacus. Vivamus arcu ex, vehicula ac diam sit amet, ullamcorper imperdiet leo. Donec pellentesque augue eget molestie pulvinar. Fusce et auctor urna. Vestibulum a fringilla orci.
        </p>
        <p>
          In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.
        </p>
        <p>
         Sed et lorem lobortis, varius est eu, molestie dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc consequat ut dolor sit amet vestibulum. Integer commodo laoreet turpis eu suscipit. Etiam vehicula ex id nibh vulputate vulputate. Suspendisse potenti. Ut ac nisl sed purus hendrerit condimentum.
        </p>
        <p>
          In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.
        </p>

    </div>
    <button class="expand-button">
        Continue Reading
      </button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;