HTML/CSS页面文本不显示：心形盒子内Livres文本无法展示

嘿，我看了你这个问题——Livres文本没法正常显示在心形盒子里，大概率是你给心形容器加的旋转属性把内部文本也跟着转了，而且可能还存在定位或者裁切的问题。我给你整理了修复方案，你可以试试：

问题根源分析 #

你用rotate(45deg)把容器转成了心形，但这个旋转会作用于容器内的所有子元素，所以你的Livres文本也跟着转了45度，而且如果容器的overflow设置不当，文本可能会被裁切到看不见。另外，你的心形CSS好像没写完（比如伪元素部分），完整的心形一般需要用:before和:after来做左右两个半圆，不然只是一个旋转的正方形。

修复后的完整代码 #

.heart {
  z-index: 10;
  position: relative;
  width: 100px;
  height: 100px;
  margin: 100px 0 0 100px;
  transform: rotate(45deg);
  background-color: #ff4444; /* 给心形加底色，方便查看 */
}
/* 用伪元素生成心形的左右两个半圆 */
.heart:before, .heart:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff4444;
}
.heart:before {
  top: -50px; /* 向上移动半个盒子高度 */
  left: 0;
}
.heart:after {
  top: 0;
  left: -50px; /* 向左移动半个盒子宽度 */
}
/* 文本容器，用来抵消旋转并居中 */
.heart-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg); /* 反向旋转抵消父元素的旋转，同时居中 */
  z-index: 11; /* 确保文本在最上层 */
  color: white; /* 换个颜色，和心形底色区分开 */
  font-size: 16px;
}

对应的HTML：

<div class="heart">
  <div class="heart-text">Livres</div>
</div>

关键修复点 #

• 给心形容器补全了:before和:after伪元素，生成完整的心形形状
• 把文本放在独立的.heart-text子元素里，用rotate(-45deg)抵消父元素的旋转，让文本恢复正常方向
• 用position: absolute + transform: translate(-50%, -50%)让文本精准居中在心形里
• 设置更高的z-index确保文本不会被心形的伪元素遮挡

你可以把这段代码替换掉你原来的片段，应该就能看到Livres正常显示在心形里了~

内容的提问来源于stack exchange，提问作者ChrisL