我是 HTML 和 CSS 的新手,所以我可能会解释得很糟糕,但我开始了。 基本上,我试图通过使用自动换行和 500 像素的最大宽度使该段落不会延伸到整个页面。它有效,但会导致我的文本向左对齐,而不是像我想要的那样居中。有人知道解决办法吗?
.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>
最佳答案
要用宽度包裹,您必须在 .para 类 CSS 中添加 overflow-wrap: break-word;
。
像这样:
.para {
text-align: center;
max-width: 500px;
overflow-wrap: break-word;
}
如果您希望段落位于页面/屏幕的中心,我在我的代码中尝试过它并且文本正确居中。您可以在 .para
类 CSS 中添加 margin: 0 auto;
。
另外,一个小技巧是不要将类命名为“div”,而是使其成为更好的类名,例如 wrapper 或与您的部分相关的其他名称。
关于html - 最大宽度和自动换行 : break-word causing text to be aligned to the left,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74161214/