Html 文本正在使用绝对定位断开

我有一个小挑战，我还没有找到任何解决堆栈溢出的方法

这就是我得到的：

这就是我想要的：

为了产生这个标题效果，我使用了绝对位置。我甚至不知道标题的宽度和高度。因此，使用此解决方案时，大文本会中断

我的HTML:

2015年2月
同侧贻贝。精英委员会。普拉拉，迪沃斯，帕拉迪斯。佩西斯，菲利斯，桑蒂斯埃斯虹膜炎。梅法兹·吉拉齐斯元素，尼西·厄罗斯·韦尔梅奥元素，在梅法兹·梅法兹·吉拉齐斯元素中。这是我的梦想。圣殿山上的智者是一个有意义的人。有趣的是，我的孩子们，我的孩子们

我的CSS:

.content{
边框：3件双黑；
填充顶部：60px；
位置：相对位置；
宽度：350px；
}
.content p{margin:20px；}
.头衔{
背景：黑色；
边界半径：5px；
颜色：白色；
左：50%；
填充：10px；
位置：绝对位置；
文本对齐：居中；
转换：翻译（-50%，-50%）；
排名：0；
}

请参阅Codepen上的一个示例，以简化操作：

---

最简单的解决方案是添加

空白：nowrap

。执行此操作时，

h1

文本不会换行

---

此外，您还可以添加

文本溢出：省略号

/

溢出：隐藏

/

宽度：100%

，以便文本形成省略号，并且永不换行

在这里，我为您做了一些小小的CSS更改

/* Cosmetics */
* { box-sizing: border-box; }
body { margin: 50px; }
p { margin: 0; }


/* True Code */
.content {
  border: 3px double black;
  padding-top: 30px;
  position: relative;
  width: 350px;
}

.content p { margin: 20px; }

.title {
  background: black;
  border-radius: 5px;
  color: white;
  left: 50%;
  padding: 10px;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  top: 0;
  white-space: nowrap;
  margin-top: 0px;
}

---

您的代码是正确的，但left属性破坏了您的输出。由于.content div被设置为相对，因此.title将保留在其中。因此，您只需要使用transform:translate（）更改.title的位置；代码。 瞧，你得到了你想要的结果

您可能会注意到，我为.content添加了填充顶部，只是为了将标题放置在适当的位置

更改后的代码如下：

/* Cosmetics */
* { box-sizing: border-box; }
body { margin: 50px; }
p { margin: 0; }


/* True Code */
.content {
  border: 3px double black;
  padding-top:10px;
  position: relative;
  width: 350px;
}

.content p { margin: 20px; }

.title {
  background: black;
  border-radius: 5px;
  color: white;
  padding: 10px;
  position: absolute;
  transform: translate(22%,-110%);
}

---

还有另一个解决方案：

.title {
    width: max-content;
}

广泛支持（截至2019年7月17日，支持率为92.25%）

---

有关详细信息，请阅读。

太棒了！谢谢……：）你能解释一下为什么会发生这种情况吗？你能用这个解决方案发送代码笔更新的链接吗？它不适合我。@CaioTarifa请确保您的浏览器支持固有宽度

.title {
    width: max-content;
}