max-width和word-wrap：break-word导致文本左对齐

Question

max-width和word-wrap：break-word导致文本左对齐

3

我对HTML和CSS非常陌生，所以我的解释可能不太清楚，但我还是来试着解释一下。基本上，我想通过使用word-wrap和最大宽度为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>

- Wafflasy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Atif Khan · Accepted Answer

要使文本自动换行，您需要在 .para 类的 CSS 中添加 overflow-wrap: break-word;。

像这样：

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

我在代码中尝试了一下，如果你想让段落位于页面/屏幕的中心，文本会被正确地居中。你可以在 .para 类的 CSS 中添加 margin: 0 auto;。

另外，一个小提示是不要将类命名为 "div"，而应该使用更好的类名称，例如 wrapper 或与你的部分相关的名称。