Math Loures Math Loures - 1 month ago 12
CSS Question

Justify big text in a button option

I am trying to build a quiz and when I am not being able to justify it all the way, look at my JsFiddle.

HTML

<div id="1" class="option"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec dolor nisi. Sed dui lacus, placerat eget hendrerit ut, pellentesque ut arcu. Suspendisse sagittis nisi sapien, vitae porta odio gravida eu.</p></div>
<div id="2" class="option"><p>Suspendisse suscipit velit a enim porta ultricies. Vivamus sit amet purus in sapien euismod congue eu at felis. Nulla vehicula rutrum elit, et congue libero cursus at. Phasellus eu nisi nec mi volutpat eleifend. Curabitur sollicitudin laoreet augue vitae egestas</p></div>
<div id="3" class="option"><p>Duis ut ante elit. Vestibulum varius et tellus ac condimentum. Nam scelerisque faucibus massa, sed molestie mauris convallis et. Duis luctus lobortis quam et varius.</p></div>


CSS

.option{width:400px;
height:200px;
margin:15px;
font-size:18px;
color:#FFFFFF;
padding:2px;
padding-left:10px;
border: 2px solid white;
cursor:pointer;
background-color:#3399FF;
line-height: 200px;
text-align: center;
white-space: normal;
}

.option:hover{
border:#FC0 solid 2px;
color:#FC0;
}


Thanks!

Answer

Put off from your style height, line-height and set text-align to justify:

     .option{width:400px;
            margin:15px;
            font-size:18px;
            color:#FFFFFF; 
            padding:2px;
            padding-left:10px;
            border: 2px solid white;
            cursor:pointer;
            background-color:#3399FF;
            text-align: justify;
            white-space: normal;
            }

            .option:hover{
            border:#FC0 solid 2px;
            color:#FC0;
            }