html - 如何响应地使带有破折号的单词转到下一行而不是中断？

Question

我正在尝试在较小的设备上将带有破折号的单词转到下一行。

我尝试了不同的属性，例如自动换行、连字符。但这对我不起作用。

codepen 演示:https://codepen.io/johnthecoder/pen/MWgKNYe

或

HTML

<div class="container">
  <h1>Welcome to my-word-with-dashes</h1>
</div>

CSS

.container {
  max-width: 400px;
  height: 100vh;
  margin: 0 auto;

  display: flex;
  justify-content: center;
  align-items:center;
}

我希望带有破折号的单词位于下一行。我该怎么做？

Answer 1

不要忘记您使用的是固定的 width的 400px对于 .container而不是 media query用于移动设备。

尝试改变width对于 .container在移动设备上(通常为 < 480px )。

CSS

.container {
  width: 400px;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items:center;
}

@media (max-width: 480px) {
  .container {
    width: 100%;
  }
}

现在，如果您想要带有不间断连字符的单词，您可以使用 Unicode Character Non-breaking Hyphen ( U+2011 ) ( &#8209 ):

<h1>Welcome to my‑word‑with‑dashes</h1>

避免用连字符打断单词的另一种方法是将其放在 span 中。与 white-space: nowrap属性:

<h1>Welcome to <span style="white-space: nowrap">my-word-with-dashes</span></h1>

避免 <nobr> :

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.