html - 我如何使带有背景的文本变得可见溢出：隐藏：？

Question

我的文字有一个背景作为图标，所以我需要一半的图标在块外可见，但overflow:hidden;不允许我这样做，我尝试给予text-overflow:visible;但我不太了解css Html，这里有一个小例子

.example{
  position:relative;
  overflow:hidden;
  height: 277px;
  width: 150px;
  background: #000;
 }

.example-title{
  position:absolute;
  top: -6%;
  left: 63%;
  background:#0d3351;
  padding: 35px 0;
}

<div class="example">
 <span class="example-title">
       Visible
 </span>
</div>

    

这是截图

在此处输入图像描述

标签： htmlcss

Answer 1

只有当父元素没有规则时，元素才能在其父元素position: absolute之外可见，因此我认为您需要一个具有规则且元素没有规则的公共父元素。overflow: hiddenpositionposition: relativeposition.example

.container {
  position: relative;
  width: 150px;
}

.example{
  overflow:hidden;
  height: 277px;
  width: 150px;
  background: #000;
 }

.example-title{
  position:absolute;
  top: -6%;
  left: 63%;
  background:#0d3351;
  padding: 35px 0;
}

<div class="container">
  <div class="example">
    <span class="example-title">
      Visible
    </span>
  </div>
</div>