文字溢出到左侧

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

Answer 2

只需在css。

中添加一个自动换行css属性

word-wrap: break-word;

Answer 3

您可以使用word-wrap:break-word或word-break:break-all

article {
  padding: 5px;
  margin: 10px;
  border: 2px solid #4afbd9;
  float: left;
  width:100px;
}
article:first-of-type {
  word-wrap: break-word
}
article:last-of-type {
  word-break: break-all
}

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