时间戳

首页 > 解决方案 > 如何自动换行标题？

html - 如何自动换行标题？

问题描述

以这段代码为例

.test {
  width: 50%;
  height: 50%;
}
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>

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

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

标签： htmlcss

解决方案

添加规则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可以使用的。

推荐阅读