my text is not wrapping in the html document

Question

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Introduction to CSS</title>
        <style type="text/css">
          #div-1 {
            background-color:blue;
            width:500px;
            height:500px;
            float:left;
            margin:10px;
          }
    
          #div-2 {
            background-color:yellow;
            padding:10px;
            clear:left;
          }
    
          #div-3 {
            background-color:red;
            padding:10px;
          }
        </style>
      </head>
      <body>
        <div id="div-1">FLOAT LEFT</div>
        <divid="div3">
uy8eyrf8eby8ovh7bu9v4ritttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
          ooutrtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
          ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
          uy8eyrf8eby8ovh7bu9v4ritttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
            ooutrtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
            ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
            uy8eyrf8eby8ovh7bu9v4ritttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
              ooutrtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
              ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
              uy8eyrf8eby8ovh7bu9v4ritttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
                ooutrtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
                ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
        </div>
        <div id="div-2">
uy8eyrf8eby8ovh7bu9v4ritttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
          ooutrtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
          ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
          uy8eyrf8eby8ovh7bu9v4ritttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
            ooutrtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
            ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
            uy8eyrf8eby8ovh7bu9v4ritttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
              ooutrtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
              ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
              uy8eyrf8eby8ovh7bu9v4ritttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
                ooutrtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
                ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
        </div>
    
      </body>
    </html>

[![enter image description here][1]][1]

Jeff Berlin · Answer 1 · 2020-05-05T14:47:10.093

1

You need to take your

<divid="div3">

and make it:

<div id="div-3">
  // code
</div>

Hopefully it's just an error in your post, but if not, you need to close that div and fix the spacing error in the element tag. You also have #div-3 specified in your CSS, so you need to fix your id and match it.

edited May 05 '20 at 14:47

answered May 05 '20 at 14:41

Jeff Berlin

590
6
17

score 0 · Answer 2 · answered May 05 '20 at 14:43

0

If you want to hard wrap long words, have a look at the word-wrap: break-word CSS property. Fix me if I misunderstood your question.

answered May 05 '20 at 14:43

Zoldszemesostoros

387
1
3
15

my text is not wrapping in the html document

2 Answers2