文本溢出到左侧

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

就自动换行CSS属性添加到CSS的文章。

word-wrap: break-word; 

Answer 2

您需要设置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 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>