如果子项溢出父项，则显示向下箭头 - 仅 CSS

Question

我有 CSS 问题，我想知道是否可行。这种情况很简单，但确实很复杂，可能只能通过好的 CSS hack 或 trick 才能完成。

如果子元素中的文本高于其父元素，我需要显示箭头。我不能以任何形式使用 JavaScript，只能使用 CSS。

箭头可以是任何东西，它可以是 div 元素、background-image 或其他任何东西，因为它不需要做任何事情。如果子尺寸小于父尺寸，则箭头不应可见。

HTML 结构是例子，如果你有不同的想法，我很开放。

我没有放任何代码，因为我无法以任何方式实现它。

Answer 1

制作这个快速示例，它依赖于 z-index 属性和 2 个伪元素。

before伪元素用来做底部的箭头，是绝对定位的
after 伪元素堆叠在箭头上方但保持在内容下方
当内容高于父元素时，after伪元素被推到箭头下方，不再隐藏

这是一个例子：

.wrap{
  position:relative;
  width:500px;
  height:150px;
  border:1px solid red;
  overflow:hidden;
  background:#fff;
}
.wrap:after{
  content:'';
  display:block;
  position:relative;
  height:inherit;
  background:inherit;
  z-index:2;
}
.wrap:before{
  content:'BC';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1.2em;
  line-height:1.2em;
  background:rgba(255,255,255,0.8);
  text-align:center;
  z-index:1;
}

<div class="wrap">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nulla hendrerit, scelerisque enim quis, feugiat lacus. Donec massa urna, faucibus at erat vel, auctor egestas risus. Etiam vitae urna sed urna vehicula lobortis. Nunc dapibus, neque vel consectetur lobortis, augue lorem gravida nunc, nec lacinia nunc lectus sit amet tellus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus, felis nunc convallis libero, at lacinia risus felis id libero. Sed elit ipsum, interdum at lorem vel, laoreet tristique ante. Praesent lectus mauris, finibus ut gravida sed, pulvinar quis orci.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nulla hendrerit, scelerisque enim quis, feugiat lacus. Donec massa urna, faucibus at erat vel, auctor egestas risus. Etiam vitae urna sed urna vehicula lobortis. Nunc dapibus, neque vel consectetur lobortis, augue lorem gravida nunc, nec lacinia nunc lectus sit amet tellus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus, felis nunc convallis libero, at lacinia risus felis id libero. Sed elit ipsum, interdum at lorem vel, laoreet tristique ante. Praesent lectus mauris, finibus ut gravida sed, pulvinar quis orci.</div>
</div>
<div class="wrap">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nulla hendrerit, scelerisque enim quis, feugiat lacus. Donec massa urna, faucibus at erat vel, auctor egestas risus. Etiam vitae urna sed urna vehicula lobortis. Nunc dapibus, neque vel consectetur lobortis, augue lorem gravida nunc, nec lacinia nunc lectus sit amet tellus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus.Sed efficitur urna risus. Mauris varius, est in vehicula dapibus .</div>
</div>

Answer 2

如果内容太小，此示例不会隐藏箭头，但它确实允许在内容溢出时展开和读取内容。

.outer{
  border: 2px solid red;
  margin: 1em auto;
  width: 350px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.inner{
  border: 1px solid gray;
  padding: 0.5em 2ch;
  max-height: 8em;
  min-height: 8em;
  overflow: hidden;
  box-shadow: 0 -0.5em 0.5em gray inset;
  transition: max-height 0.25s ease-in-out;
}

p{
  margin-top: 0;
}

label{
  margin: 0 auto;
  transform: rotate(90deg);
  transition: transform 0.25s ease-in-out;
}

.arrow{
  margin: 0 auto;
  display: none;
}

.arrow:checked + label{
  transform: rotate(-90deg);
  transition: transform 0.5s ease-in-out;
}

.arrow:checked + label + .inner{
  max-height: 25em;
  transition: max-height 0.5s ease-in-out;
}

<div class="outer">
  <input class="arrow" id="arrow" type="checkbox" />
  <label for="arrow">▶</label>
  <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est impedit fugit quasi dignissimos, itaque labore culpa, maiores sit optio officiis sapiente odit id repellendus accusamus nihil consequatur praesentium possimus dicta! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quos voluptas beatae nesciunt tenetur. Quas iste, odit sapiente facere vitae, tenetur soluta fuga odio perspiciatis unde blanditiis, voluptatum, doloremque suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eius, voluptatum, architecto consectetur eaque quisquam possimus tenetur sunt quibusdam dolorem enim eum! Atque, at vel officia, non ipsa a unde!</p>
  </div>
</div>

<div class="outer">
  <input class="arrow" id="arrow2" type="checkbox" />
  <label for="arrow2">▶</label>
  <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est impedit fugit quasi dignissimos.</p>
  </div>
</div>

如果子项溢出父项，则显示向下箭头 - 仅 CSS

Show down arrow if child overflows parent - CSS only

html

css

overflow