css:在溢出隐藏之前可见

问题描述 投票:0回答:1

之前有可能展示一些东西吗?当溢出被隐藏?或者我们可以指定一边隐藏溢出?对于前:

.before {
  width: 200px;
  margin: 30px;
  background-color: blue;
  height: 30px;
  position: relative;
}

.before:before {
  content: "221";
  color: blue;
  font-size: 15px;
  display: inline-block;
  position: absolute;
  left: -20px;
  top: -20px;
}

#ex2 {
  overflow: hidden;
}
<div id='ex1' class='before'>Wisible text with css before, more text, more and more... but </div>
<div id='ex2' class='before'>hidden overflow text with css before... more and more text</div>
css overflow
1个回答
0
投票

如果你声明一个元素有overflow: hidden它将适用于所有内容,包括beforeafter元素。无法禁用特定子项的隐藏值。

考虑将内容包装在具有其父级的最大宽度和高度的div中,并在该div上设置oveflow: hidden。根元素的beforeafter伪元素将存在于包装器之外,因此不会受到影响。

.before {
  width: 200px;
  margin: 30px;
  background-color: blue;
  height: 30px;
  position: relative;
}

.before:before {
  content: "221";
  color: blue;
  font-size: 15px;
  display: inline-block;
  position: absolute;
  left: -20px;
  top: -20px;
}

#ex2 > .wrapper {
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}
<div id='ex1' class='before'><div class="wrapper">Visible text with css before, more text, more and more... but </div></div>
<div id='ex2' class='before'><div class="wrapper">Hidden overflow text with css before... more and more text</div></div>
© www.soinside.com 2019 - 2024. All rights reserved.