如何自动换行标题？ [复制]答案

【问题标题】：How to auto-line-break heading? [duplicate]如何自动换行标题？ [复制]
【发布时间】：2019-07-18 18:15:45
【问题描述】：

以这段代码为例

.test {
  width: 50%;
  height: 50%;
}

<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1 class="test">This is a Headindfdfdfdfdsdfsdffdfdfdfddfdfdfddfghfghfddfdfdfdfdfdfdfdfdfdffdffdfdffdg</h1>

</body>
</html>

我将标题的宽度限制为整个页面的一半，并且我希望文本在超出页边距时能够自动换行。但它不起作用。

那么，如何自动（不使用</br>）换行？

【问题讨论】：

标签： html css

【解决方案1】：

添加规则word-break:break-word;

.test {
  width: 50%;
  height: 50%;
  word-break:break-word;
}

<html>

<head>
  <title>Page Title</title>
</head>

<body>

  <h1 class="test">This is a Headindfdfdfdfdsdfsdffdfdfdfddfdfdfddfghfghfddfdfdfdfdfdfdfdfdfdffdffdfdffdg</h1>

</body>

</html>

注意还有overflow-wrap可以使用。

【讨论】：

谢谢。但是你怎么知道这件事？我尝试用谷歌搜索html heading line break，但没有任何用处。
@NathanExplosion 20 多年的经验 ;)
但实际上，我发现一个单词的换行符并没有给你一个连字符。如何启用连字符？
@NathanExplosion 这是一个不同的问题，请参阅stackoverflow.com/questions/15261605/…

【解决方案2】：

使用css自动换行

.test {
  width: 50%;
  height: 50%;
  word-wrap: break-word;
}

&lt;h1 class="test"&gt;This is a Headindfdfdfdfdsdfsdffdfdfdfddfdfdfddfghfghfddfdfdfdfdfdfdfdfdfdffdffdfdffdg&lt;/h1&gt;

【讨论】：

word-wrap 现在是 overflow-wrap