How do I make a paragraph of text display as a square/rectangle in CSS -

i have created modal popup , have been trying figure out how make text in modal justified on top, bottom, left, , right (displaying rectangle/square). have tried block not working.

so modal section text looks this:

xxxxxxxx xxx xxxx xx xxx xxxxx xxx xxxxxxxxx xxx xxxxx xx xxxxx xxxx xxxx  xxxx xxxxxxxx  xxxx xxxxxxxx xx xxxxx xx xx xxxx xxx x xxxxxxx xx x x  x xx xxxxx x x  x x xx  x xxx x x x  

and jagged right.

how make there no jagged edges like.

xxxxxxxx xxx xxxx xx xxx xxxxx xxx xxx xxxx  xx xxx xxxxx xx xxxxx xxxx xxxx  xxxx xx   xxxxx x  xxxx xxxxxxxx xx xxxxx xx xx xxxx xxx x xxxxxxx xx x x  x xx xxxx x x  x   x  x xx  x xxx x x x  

i have been trying while , can't seem it.

edit: added css

#modal{ background-color:    #4d94b8; outline-color:    #180238; border: 1px solid #3b7593; border-radius: 80px; font-family:  arial; text-align: justify; display:  inline-block; text-align:  justify; left: 50%; top: 50%; width:24%; height:50%; z-index: 1000; margin-left: 35%; margin-top:  7%; }  .mheader{     text-decoration:    underline;     text-align:         center;     padding-top:      20%;     font-size:          1vw; }  .mbutton{     background-color:   #929292;     border-radius: 100%;     color:    #ffffff;     text-align:center;         height: 1.5vw;         width: 7vw;     margin-top:  5%;     margin-bottom:  5%;     margin-left:  36.5%;     margin-right: auto;     font-size:  .72vw;     border-style:  none;     border: 1px solid #666666; }  section{     padding-left: 10%;     padding-top:  1%;     margin-left: auto;     margin-right: auto;      font-size:  .9vw;     font-weight:  bold;     display:   block;     line-height:  20px;     margin-top:   0%;     margin-left: auto;     margin-right: auto; text-align:  justify; } 

im new web development , im sure there lot of css doesn't belong here...please don't laught @ me.

edit: here jsfiddle link: https://jsfiddle.net/n8lldvme/

you can use text-align:justify , pseudo element avoid text stand on virtual last line.

p {    width:18em;    text-align:justify;    }  p:after {/* adds invisible line, other line justified */    content:'';    display:inline-block;    width:100%;    vertical-align:top;    }

<p>xxxxxxxx xxx xxxx xx xxx xxxxx xxx xxxxxxxxx  xxx xxxxx xx xxxxx xxxx xxxx  xxxx xxxxxxxx   xxxx xxxxxxxx xx xxxxx xx xx xxxx xxx x xxxxxxx  xx x x  x xx xxxxx x x  x x xx  x xxx x x </p>