Weird spacing between words when using

HTML & CSS
1

I don’t really know what’s causing this but check this out:

See how the first line of text is way spaced out? I can’t figure out why.

Here’s the style that is set in the div surrounding the entire square:


.waitBoxContainer
{
    text-align: justify;
	position:absolute; 
	width:400px; 
	height:140px; 
	border:1px solid #000; 
	padding:10px; 
	background-color:#f3f1eb; 
	font-size: 12px; 
	color: #000; 
	font-weight: bold;    
}
2

Your problem is text-align: justify.

‘Justified’ text basically tries hard to make all text in a paragraph fit to the width, so that the text looks like a rectangular block rather than scattered at the right.

It does this by increasing the space length on mid-long lines so that they become full-length lines. Short lines stay short.

3

Well I wanted justify for that paragraph block effect, but I guess the width is too far like you said and is “pulling” it and adding space the longer that width gets right?

thanks for clarifying.