html - 文本溢出到左侧

Question

有人可以帮忙吗？我不希望文本溢出到左侧。我需要 <p>自动添加换行符。

这是 CSS:

article {
    padding: 5px;
    margin: 1px 0px;
    border: 2px solid #4afbd9;
    float: left;
}

和 HTML:

<article id="the_article">
  <h1>Hello guys </h1>
    <p>wefeasdfasdfasdfaewgewtawerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrfgrrrrrrrrrrrrrrrrdgdsffgsdfgsdfgsdfgsdfggsdfgsdfgsdfsdfgsdfgsdfggsdfgsdfgsdfrrrrrrdg</p>
</article>

Answer 1

你需要设置word-wrap: break-word到父元素(在您的示例中为 <article>)

article {
  word-wrap: break-word;
}

p {
  background-color: yellow;
  width: 50%;
  height: 90px;
}

<article>
  <p>wefeasdfasdfasdfaewgewtawerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrfgrrrrrrrrrrrrrrrrdgdsffgsdfgsdfgsdfgsdfggsdfgsdfgsdfsdfgsdfgsdfggsdfgsdfgsdfrrrrrrdg</p>
</article>

关于 word-wrap 的一些文档:

• Mozilla Dev