How can I set text to fill a div horizontally?

Question

Say I have div that is a specified width of 200px. Then I have 3 h1 elements in that div with different amounts of letters / different widths. How do I stretch them horizontally to fill the div?

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

What I need is the words to be same width---the width of the containing div.

I tried text-align justify on the h1 but that didn't do any good.

.Logo { 
margin-left: 100px; 
height:auto; 
width:  250px;  
background-color:#666; 
font-family: Impact, Charcoal, sans-serif; 
text-align: justify; 
}

.Logo h1 {    
font-size: 40;
text-align:justify;
display: inline;     
}

Somebody else asked for something like that. Look here: [http://stackoverflow.com/questions/4355009/css-text-justify-with-letter-spacing][1] [1]: http://stackoverflow.com/questions/4355009/css-text-justify-with-letter-spacing — Carl0s1z, May 31 '13 at 08:37
this may also help: http://stackoverflow.com/questions/5976289/stretch-text-to-fit-width-of-div — Pete, May 31 '13 at 08:37

Mr. Alien · Accepted Answer · 2013-05-31T08:40:25.727

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

score 0 · Answer 2 · answered May 31 '13 at 08:49

0

Use letter-spacing

eg: letter-spacing:20px

answered May 31 '13 at 08:49

geovani075

369
1
2
12

score 0 · Answer 3 · answered May 31 '13 at 08:51

Check this out:

Demo

CSS:

#Header{
  width:200px;
  height:200px;
  background-color:grey;
  overflow:hidden;
}
#h1{
  -webkit-transform:scaleX(0.78);
  margin:0 0 0 -25px;
}
#h2{
-webkit-transform:scaleX(2.3);
  margin:0 0 0 70px;

}

#h3{
-webkit-transform:scaleX(1.3);
  margin:0 0 0 25px;

}

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="Header">
    <div class="Logo"><h1 id='h1'>CORROBORREE</h1><br><h1 id='h2'>FROG</h1><br><h1   id='h3'>PROJECT</h1></div></div>
</body>
</html>

score -3 · Answer 4 · answered May 31 '13 at 08:30

-3

text-align:justify and display:block. And there can be only the one h1-tag on one page

answered May 31 '13 at 08:30

Foker

944
2
9
22

actually with html5 it is encouraged to use multiple h1 tags – Pete May 31 '13 at 08:34
Wrong on multiple levels ... `justify` only works for the space in between _words_, not connected letters, and it does not work for one-line content. And of course a document can have multiple `h1` (how much sense that makes is a different question, depends on the content structure you are trying to build). – CBroe May 31 '13 at 08:35

How can I set text to fill a div horizontally?

4 Answers4