html - 溢出 : Hidden causing content layout issues

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");
  }
});

这非常接近我正在寻找的预期效果，但我想不出一种方法来让出现在图像之后的文本换行并使用图像下方的空间。

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

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

如果有人可以就如何实现这一目标提供一些指导，那就太棒了。

Answer 1

好的，经过大量的试验和错误，这是我发现完全按照您的意愿行事的唯一方法

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

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

这里的主要问题是您试图以不自然的方式展示内容的运作方式。您希望图像显示，这意味着它需要在内容之外，如果它在内容之外，那么您的 float 图像将不会让您的文本换行，因为文本位于 block 元素中。该元素必须保持 block 状，因为您需要为其设置动画的最大高度。

我们不能设置 overflow visible on expand 因为它所做的只是立即显示内容，这就是为什么你会在文本前面看到那个按钮，因为文本只会显示，此时动画是无用的。

虽然下面的代码有效，但它不是动态的。我强烈建议您在某个地方做出妥协，要么将图像与文本放在一起，然后让淡入淡出隐藏图像的一部分，要么像您一样在左侧显示文本。唯一的其他选择可能是使用 js 计算点击高度然后设置一堆东西，但我真的认为这太复杂了

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

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

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

.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;
}

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