我使用 white-space: nowrap 所以我的字符串将保持在一行中，但我还设置了 max-width: 100px 因为我希望字符串仅在以下情况下中断在 max-width 上，只有两个参数相互冲突才有意义。 white-space 属性“压倒”max-width 属性，字符串保持在一行中。

<div class="mydiv">this is my text</div>

.mydiv {
  position: absolute;
  white-space: nowrap;
  max-width: 100px;
  left: 50%;
  transform: translateX(-50%);
}

我尝试使用 overflow-wrap 属性“播放”，但这也不起作用。

如果我删除 white-space 属性，字符串将逐字分开，每个字换行。发生这种情况是因为该元素是 position: absolute，我认为..

那么我该如何解决呢？

最佳答案

If I remove the white-space property, the string break word by word, each word in a new line. That's happening because the element is position: absolute, I think

这是因为 left:50% 会将元素的宽度限制为最大宽度等于包含 block 宽度的 50%。

添加一个负的margin-right来避免这个问题

.mydiv {
  position: absolute;
  max-width: 400px;
  left: 50%;
  transform: translateX(-50%);
  margin-right:-50%;
  border:1px solid;
}

<div class="mydiv">this is my text this is my text this is my text this is my text this is my text</div>

如果没有边距技巧，元素将更快地换行:

.mydiv {
  position: absolute;
  max-width: 400px;
  left: 50%;
  transform: translateX(-50%);
  border:1px solid;
}

<div class="mydiv">this is my text this is my text this is my text this is my text this is my text</div>

https://stackoverflow.com/questions/64421829/