Question

以该代码为例

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

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

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

</body>
</html>

我将标题的宽度限制为整个页面的一半，并且希望文本一旦超出页边距就可以自动换行。但这是行不通的。

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

Answer 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可以使用。

Answer 2

使用CSS自动换行

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

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

如何自动换行标题？

2 个答案: