文字溢出到左侧

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