Text überläuft nach links

Question

Kann mir jemand helfen? Ich möchte nicht, dass der Text auf die linke Seite überläuft. Ich brauche die <p>, um automatisch Zeilenumbrüche hinzuzufügen. Hier

ist die CSS:

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

Und die HTML:

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

Answer 1

Fügen Sie einfach einen Zeilenumbruch CSS-Eigenschaft zu dem Artikel in CSS.

word-wrap: break-word; 

Answer 2

Sie müssen word-wrap: break-word an das Mutterelement (<article> in Ihrem Beispiel) setzen

article { 
 
    word-wrap: break-word; 
 
} 
 

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

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

Ein Teil der Dokumentation über word-wrap:

• Mozilla Dev

Answer 3

Sie können entweder word-wrap:break-word oder 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>