html - How to keep a sentence lined up perfectly after making the browser smaller? -


to honest, can't find right words adress problem, i'll try. first picture in picture, of first words of each sentence lined perfectly.

second picture in picture, first word of each sentence doesn't line eachother. happens when place in center text-align. know why that, sadly i'm not able fix easy thing fix.

this code tested with:

    <!doctype html> <html>     <head>         <meta charset="utf-8">         <style>             #text {                 text-align: left;                 word-wrap: break-word;                 width: 100%;                 max-width: 470px;             }              @media , (max-width: 1300px) {             #text {             text-align: center;             }         }          </style>     </head>     <body>         <div id="text">                  random textjust random textjust random textjust random textjust random textjust random textjust random textjust random text                 random textjust random textjust random textjust random textjust random textjust random textjust random textjust random text                 random textjust random textjust random textjust random textjust random textjust random text                 random textjust random textjust random textjust random textjust random textjust random textjust random textjust random text                 random textjust random textjust random textjust random textjust random textjust random textjust random textjust random text                 random textjust random textjust random textjust random textjust random textjust random text         </div>     </body> 

any appriciated, thanks.

if want remove gaps use this

#text {     text-align:justify;     word-break: break-all; } 

here sample fiddle..

note: word-break: break-all breaks word/letter unto next line. words or texts harder read..


Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -