最大宽度和换行:打断单词，使文本向左对齐

Question

我对HTML和CSS很陌生，所以我可能会对此解释得很糟糕，但现在我开始了。基本上，我试图通过使用换行符和最大宽度为500px来使这段文字不延伸到整个页面。它起作用，但会使我的文本向左对齐，而不是像我想要的那样居中。有人知道解决办法吗？

.para {
text-align: center;
max-width: 500px;
word-wrap: break-word;
}

<div class="div">
<hr/>
<main>
<img src=""  width="400" height="400"/>
<h1>AAAAAA</h1>
<section>
<h2>About me</h2>
<p class="para">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>

Answer 1

要用宽度换行，必须在.para类CSS中添加overflow-wrap: break-word;。

像这样：

.para {
text-align: center;
max-width: 500px;
overflow-wrap: break-word;
}

我在代码中尝试过，如果你想让段落成为页面/屏幕的中心，文本会正确居中。您可以在.para类CSS中添加margin: 0 auto;。

此外，一个小提示是不要将类命名为"类"；div"；相反，让它成为一个更好的类名，例如包装器或与您的节相关的东西。