在按钮选项中对齐大文本

Question

我正在尝试构建一个测验，但当我无法完全证明它的合理性时，请查看我的 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;
                }

谢谢！

Answer 1

从您的样式高度、行高和设置文本对齐到对齐：

     .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;
            }

在按钮选项中对齐大文本

Justify big text in a button option

html

css

button

text

justify