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

Question

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

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

箭可以是任何东西,它可以是div元素,background-image或其他任何东西,因为它不需要做任何事情.如果儿童尺寸小于parrent尺寸,则不应显示箭头.

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

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