使用绝对定位时文本换行问题（续）：需单行直至达最大宽度后换行

Got it, let's fix this exactly how you need it! The earlier white-space: nowrap trick works for forcing single-line text, but that's not what you want here—you need the title to stay single-line until it hits your max-width: 300px, then wrap automatically.

Here's the straightforward solution: #

First, ditch the white-space: nowrap (or override it with the default value), since that's what's locking your text into a single line forever. Then, lean into how absolute positioning and max-width work together.

Example Code:

HTML

<div class="parent-container">
  <h2 class="dynamic-title">Short title (stays single-line)</h2>
  <h2 class="dynamic-title">This is a super long title that will wrap once it exceeds the 300px max-width we've set—perfect for your use case!</h2>
</div>

CSS

.parent-container {
  position: relative; /* Critical: gives your absolute-positioned title a positioning reference */
  width: 600px;
  height: 300px;
  border: 1px solid #eee;
}

.dynamic-title {
  position: absolute;
  top: 30px;
  left: 30px;
  max-width: 300px; /* Your desired max width */
  white-space: normal; /* This is the default, but explicitly set it if you had nowrap before */
  line-height: 1.4; /* Optional: improves readability when wrapped */
  margin: 0;
  padding: 5px 10px;
  background: #f8f8f8;
}

How it works: #

• Absolute-positioned elements automatically shrink to fit their content (unless you set a fixed width). So short titles will stay narrow and single-line.
• When the title's content would exceed 300px, the max-width kicks in, locking the element's width at 300px—and since white-space: normal is active, the text will wrap naturally.

Bonus fix for unbreakable text: #

If you have long strings without spaces (like URLs or long English words), add one of these properties to force wrapping:

.dynamic-title {
  /* Keep words intact when possible, break only if necessary */
  overflow-wrap: break-word;
  /* OR force break at any character (good for non-text content like URLs) */
  word-break: break-all;
}

That's all you need! This setup respects your max-width while keeping short titles clean and single-line.

内容的提问来源于stack exchange，提问作者M'sieur Toph'