Question

有可能展示出什么东西吗？什么时候隐藏了溢出？还是我们可以指定一侧是否会被溢出隐藏？例如：

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

Answer 1

如果您声明一个元素包含overflow: hidden，则它将应用于所有内容，包括before和after元素。无法禁用特定孩子的隐藏值。

请考虑将您的内容包装在div中，其宽度和高度为其父级的最大宽度，然后在该div上设置oveflow: hidden。根元素的before和after伪元素将位于包装器外部，因此不会受到影响。

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

css：溢出隐藏时可见

1 个答案: