Justify Text to Fill a Div

Justify text to fill a div

In DTP and word processing applications, this option is known as 'force justify'. Unfortunately, this is not an option in CSS.

justify one line of html text to fill an entire line?

Add

#navigation:after { /* Justify last line */
    content: '';
    display: inline-block;
    width: 100%;
}
#navigation { /* Fix added space */
    height: 1.15em;
    line-height: 1.15;
}

Demo

Justify text in a div with width 100% - 60px

I assume you mean the text. This is because text-align: justify doesn't justify the last line of a block of text. One workaround is to add a css generated content item that acts like an inline text item but stretches the full width of the container like so:

#menu:after {
  content: '';
  display:inline-block;
  width: 100%;
}

#menu{font-family: Arial;font-size:22px;width: calc(100vw - 60px);left: 30px;text-align: justify;text-justify: inter-word;position:fixed;}
#menu:after {  content: '';  display:inline-block;  width: 100%;}

<div id="menu">SS17 FW16/17 ABOUT STOCKISTS</div>

How to adjust text as justified in div tag

Try this: http://jsfiddle.net/945cn/1/

You had a random, unneeded <p> tag without a closing </p> tag so I removed it. Also, I suggest not using inline css and putting the css in a style sheet as I show in my JSFiddle. Let me know if this works for you.

HTML:

<div class="justified">
    We are a mix of young, energetic individuals mentored by experienced seniors who as a team are passionate about continually moving out of our comfort
    <br>zones. some text
</div>

CSS:

.justified {
    text-align:justify;
    width:300px;
    height:200px;
    border:1px solid
}

How to justify text with letters from a to z in div in Bootstrap 3?

Wrap your A-Z inside a paragraph and assign the bootstrap alignment class text-justify To occupy the full width of the div. You can set a pseudo-element :after that fakes a empty space/block after the paragraph. The inline-block will stretch the text to meet the content in the :after pseudo element.

Thanks for the hack: Answer from Mutil

p:after {  content: "";  display: inline-block;  width: 100%;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">  <div class="col-md-12">    <p class="text-justify">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>  </div></div>

How to make text fill div without overflowing?

Using flexbox and auto margins we can align vertically and horizontally.

Demo

[flex]{  width:400;  height:200px;  border:1px solid;  display:flex;}
[flex]>span{  margin:auto;}

<p flex><span>Some text</span><p>

How can I set text to fill a div horizontally?

I don't think there's a pure CSS way to do it as of now (I mean using some straight CSS way, you need to juggle things around), what you can do is use nth-of-type in CSS and give letter-spacing to each.. this way you don't have to declare classes for each h1 and also you'll get stretched text

Demo

<div class="Logo">
    <h1>CORROBORREE</h1>
    <br />
    <h1>FROG</h1>
        <br />
    <h1>PROJECT</h1>
</div>

html, body {         /* Using this or not depends on you, 
                        nothing to do with the example */
    width: 100%;
    height: 100%;
}

.Logo {
    background: #f00;
    width: 300px;
}

.Logo h1:nth-of-type(1) {
    letter-spacing: 4px;
}

.Logo h1:nth-of-type(2) {
    letter-spacing: 70px;
}

.Logo h1:nth-of-type(3) {
    letter-spacing: 25px;
}

Why you want to do it, I don't know, cuz this will look super weird

CSS, fill all div width with text

EDIT: Unfortunately this only changes word spacing, not letter spacing. There is not way to do kerning in CSS. Possibly CSS3, however.

This is easily accomplished with the text-align: justify CSS attribute:

#menu 
{ 
      width: 200px; 
      background-color: #000; 
      color: #336699; 
      font-size: 16px; 
      text-align: justify; 
}

Justify Text to Fill a Div