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

Question

我有CSS问题，我想知道是否有可能。 这种情况很简单但很复杂，可能只能用一个好的 CSS 黑客或技巧来完成。

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

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

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

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

Answer 1

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

• 使用before伪元素在底部制作箭头，它绝对定位
• after伪元素堆叠在箭头上但保持在内容
之下
• 当内容高于父级时，after伪元素被推到箭头下方并且不再隐藏它

以下是一个例子：

＆＃13;

＆＃13;

.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:'\25BC';
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;