text-align

text-align在inline元素上不起作用

by zicai

HTML

<!--
MDN:
The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.
-->
<span class="inline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus est fugit nihil neque provident temporibus dolore itaque mollitia </span>
<span class="inline-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus est fugit nihil neque provident temporibus dolore itaque mollitia </span>
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus est fugit nihil neque provident temporibus dolore itaque mollitia </div>

CSS

.inline{
    text-align:justify;
}
.inline-block{
    display:inline-block;
    text-align:justify;
}
.block{
    text-align:justify;
}