Question

我知道当元素溢出标记（overflow: hidden，div等）时，您可以p隐藏溢出的内容。

是否有可能采取相反的行为？

仅显示溢出的内容。我搜索过它，但找不到任何相关内容。

Answer 1

我不太确定我会做你想做的事情（我添加了一个幻灯片效果到片段，原谅了它的一些含义:)），但相对和z-index可以做到：

＆＃13;

p {
  width:400px;
  padding:1em;
  margin:0;
  position:relative;
  z-index:-1;
  border:solid blue;
  background:lightblue;
  transition:0.5s;
}
div {
  width:200px;
  background: url(http://lorempixel.com/400/300/nature/8) white;
  background-size:cover;
}
div:hover p {
  margin-left:200px;

＆＃13;

<div>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
</div>

＆＃13;

Answer 2

你不能只是溢出内容为此，您需要为该内容创建一些标记，例如div 然后，您将div标记与内容一起溢出。

我没有看到任何其他方法。

Answer 3

我认为CSS无法实现。一个想法：

div {
  width: 200px;
  height: 200px;
  color: #ccc;
  background: #bada55;
  margin-left: 100px;
  margin-top: 100px;
  position: relative;
  overflow: visible;
}
div:after {
  content: '';
  position: absolute;
  background: #fff;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #fff;
}

CODEPEN

Answer 4

使用绝对定位在div的顶部添加一个带溢出内容的图层。使顶层固定，尺寸固定。当内容增长时，它将保留在一个位置，看起来好像只有溢出的内容出现在您想要的位置。

是否可以只显示标签溢出的内容？

4 个答案:

CODEPEN