Question

你好，我想知道如何隐藏其他一些文字所覆盖的文字。

查看此示例：

.compactMapValues { placemarks -> Void in
       if let ca = placemarks.filter{ $0.ISOcountryCode == "CA"}.first {
            self.seal.fulfill(())
       } else if let usa = placemarks.filter{ $0.ISOcountryCode == "US"}.first {
            if self.allowedStates.contains(usa.administrativeArea ?? "") {
                self.seal.fulfill(())
            } else {
                let error = LocationError.InvalidState(usa.administrativeArea ?? "")
                self.seal.reject(error)
            }
    } else {
         let error = LocationError.InvalidCountry(placemarks.first?.ISOcountryCode ?? "")
         self.seal.reject(error)
     }
 }

.container {
  display: flex;
}

.left {
  background-color: red;
  width: 50px;
  overflow: visible;
  /* should be position relative but im omitting it just for this example */
}

.left p {
  position: absolute;
  left: 15px;
}

.right {
  background-color: tan
}

如您所见，左侧的div文本溢出为右侧的divs文本。谁能帮我把左边的文本与右边的文本重叠，从而使重叠的右边的文本完全不显示在CSS中？我需要将当前的html结构与溢出的文本保持一致。

我通常会在左侧文本上使用背景色，但是在这种特殊情况下，由于背景色超出了其父div，因此我无法使用背景色。

谢谢！

Answer 1

您可以考虑使用伪元素，其中将使用右div的背景色来隐藏文本。然后调整z-index个元素以达到所需的效果：

.container {
  display: flex;
  z-index:0;
  margin:5px;
}

.left {
  background-color: red;
  width: 50px;
  overflow: visible;
  /* should be position relative but im omitting it just for this example */
}

.left p {
  position: absolute;
  left: 15px;
}

.left p:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:tan;
}

.right {
  background-color: tan;
  z-index:-2;
}

<div class="container">
  <div class="left">
    <p>text text text</p>
  </div>
  <div class="right">
    <p>123456</p>
  </div>
</div>

<div class="container">
  <div class="left">
    <p>text </p>
  </div>
  <div class="right">
    <p>123456</p>
  </div>
</div>
<div class="container">
  <div class="left">
    <p>text text aa </p>
  </div>
  <div class="right">
    <p>123456</p>
  </div>
</div>

Answer 2

您可以通过将背景颜色应用于<p>并使用一些右填充使其更清晰来实现。

.container {
  display: flex;
}

.left {
  background-color: red;
  width: 50px;
  overflow: visible;
  /* should be position relative but im omitting it just for this example */
}

.left p {
  position: absolute;
  left: 15px;
  background-color: red;
  padding-right:0.25em;
}

.right {
  background-color: tan
}

<div class="container">
  <div class="left">
    <p>text text text</p>
  </div>
  <div class="right">
    <p>123456</p>
  </div>
</div>

在溢出的文字后面隐藏文字|的CSS

2 个答案: