css - Justify Content Inside div -
i have should basic css question. want justify text in div you'd see in newspaper. can't understand why refuses it.
below codepen example i'm trying do. want letters sit flush creates box. thank you!
http://codepen.io/anon/pen/rpyjqo
<div id="where_we_are_factoid"><p>corporate learning<br> centers located on<br> <span>3 continents,</span><br> in 4 countries , 27 states</p></div> #where_we_are_factoid { font-size: 22px; font-weight: 200; float: right; width: 260px; } #where_we_are_factoid p { text-align: justify; text-justify: inter-word; } #where_we_are_factoid span { font-size: 39px; font-weight: 600; }
the line-by-line justification can done adding mark-up, css bit complex.
depending on words in use , overall width of parent div
, typography can bit unpleasant, experimentation may needed.
my example proof-of-concept, actual use still subject comment , debate.
#where_we_are_factoid { font-size: 22px; font-weight: 200; width: 260px; float: right; } #where_we_are_factoid span { text-align: justify; display: block; line-height: 1.20em; height: 1.20em; } #where_we_are_factoid span:after { content: ''; display: inline-block; width: 100%; vertical-align: top; height: 0; } #where_we_are_factoid span.bold { font-size: 39px; font-weight: 600; }
<div id="where_we_are_factoid"> <span>corporate learning</span> <span>centers located on</span> <span class="bold">3 continents,</span> <span>in 4 countries , 27 states</span> </div>
Comments
Post a Comment