使用绝对定位破坏文本，第 2 部分

Question

这个问题是指这个问题：

这一篇的回答推荐使用white-space: nowrap;

我的情况完全一样（我不知道标题的宽度div也不想设置），但是我不会希望我的文字系统地排在一行上。

我的标题有一个max-width: 300px，我希望内容在一行中，直到达到这个max-width，之后，我想换行并重新开始在另一个上。（不知道我是否足够清楚）。在这种情况下，white-space: nowrap; 是没有用的...

这是一个代码笔：https://codepen.io/msieurtoph/pen/wjKNZZ

我该怎么做才能做到这一点

或这个

...看起来像：

?

感谢您的帮助

Answer 1

您遇到的问题是您使用转换/翻译将未知宽度的绝对定位 div 居中的方式。 left: 50% 规则有效地为您的标题提供了 parent 的 50% 的最大宽度，因为浏览器将其视为从中间开始并延伸到右边缘。

我的解决方案是将标题以绝对宽度包裹 div，然后使用 parent 上的 text-align: center 和 [= 上的 display: inline-block 将其居中26=]。这将允许 h2 元素动态扩展到您的 max-width 但如果内容不需要它仍然会折叠。

* {
  box-sizing: border-box;
}

body {
  margin: 60px;
}

p {
  margin: 0;
}

.content {
  border: 3px double black;
  padding-top: 60px;
  position: relative;
  width: 350px;
}

.content p {
  margin: 20px;
}

.title {
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
  text-align: center;
  transform: translateY(-50%);
}

.title h1 {
  margin: 0;
  padding: 10px;
  max-width: 300px;
  background: black;
  border-radius: 5px;
  color: red;
  display: inline-block;
}

<div class="content">
  <div class="title">
    <h1>February 2015 and real long text</h1>
  </div>
  <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma
    pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>

Answer 2

去掉transform/translate和white-space,可以设置成left和top绝对定位,改变max-width:90%,

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


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

.content p { margin: 20px; }

.title {
 background: black;
 border-radius: 5px;
 color: red;
 left: 16px;
 padding: 10px;
 position: absolute;
 text-align: center;
 top: -40px;
 max-width: 90%;
}

<div class="content">
  <h1 class="title">February 2015 and real long text</h1>
  <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>

使用绝对定位破坏文本，第 2 部分

Text is breaking using absolute positioning, part 2

html

css

line-breaks

absolute