CODEWITHSUNDEEP
css
Bardsworth
Bardsworth

Reputation: 408

Justify Content Inside div

I have what should be a very basic css question. I want to justify the text in this div just like it you'd see in a newspaper. I can't really understand why it refuses to do it.

Below is a codepen with the example i'm trying to do. I want all the letters to sit flush so it creates a box. Thank you!

http://codepen.io/anon/pen/RPYJqo

<div id="where_we_are_factoid"><p>Corporate Learning<br>
Centers are located on<br>
<span>3 continents,</span><br>
in 4 countries and 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;
}

Upvotes: 1

Views: 414

Answers (3)

Marc Audet
Marc Audet

Reputation: 46785

The line-by-line justification can be done by adding extra mark-up, but the CSS is a bit complex.

Depending on the words in use and the overall width of the parent div, the typography can look a bit unpleasant, so some experimentation may be needed.

My example is a proof-of-concept, the actual use is still subject to comment and 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 are located on</span>
  <span class="bold">3 continents,</span>
  <span>in 4 countries and 27 states</span>
</div>

Upvotes: 1

RepeatQuotations
RepeatQuotations

Reputation: 724

This question is along the same train of thought as another I answered - this may help you: How to determine largest possible font-size such that it fits on one line in CSS

If you don't mind using a javascript library, fittext.js would accomplish what you are after well and work responsively (at different device widths). Definitely put each of your sentences in a seperate span element for structural integrity.

Looking at that other thread, another poster recommended using css calc and a monospace font which also works responsively: http://codepen.io/anon/pen/rVvWEW

Upvotes: 0

user4563161
user4563161

Reputation:

Firstly text-justify has long since been drooped from support

You need to think about how text formatting work's. When you use <br> you are committing a single line break ending that text string. So there is no additional space to justify to because that is where it end's.

The same happens for <p> wrapping them all in <p> will not work because you are telling it to stop there imagine how screwy a three word sentence would look justified to 500px

The only way you are going to do it is by setting a fixed width and try to get it as close as possible to what you want like in the example below.

#where_we_are_factoid {
  font-size: 22px;
  font-weight: 200;
  width: 220px; 
  float: right;
}
#where_we_are_factoid p {
  text-align: justify;
}
#where_we_are_factoid span {
  font-size: 39px;
  font-weight: 600;
}
<div id="where_we_are_factoid"><p>Corporate Learning
Centers are located on
<span>3 continents,</span>
in 4 countries and 27 states</p></div>

alternatively you could use multiple span classand pad the hell out of it to get it all lined up the way you want.

Upvotes: 1

Related Questions