Make text fit in div

Question

I have been working on re-doing my fathers website that was created in the nineties (ugh) and I have been having trouble getting the text to fit inside of a div and align horizontally. I need the text to sit next to each other so they fit in the div. Here's the code for the page in a jsfiddle

Example HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<body>
    <div> 
        <img id="header" src="http://www.salesprofessionalsinc.com/images/new%20logo.jpg">
    </div>
    <div id="links">
        <div class="home">
            <a href="index.html"><span></span>Home</a>
        </div>
        <div class="home">
            <a href="insidestaff.html"><span></span>Inside Staff</a>
        </div>
        <div class="home">
            <a href="mission.html"><span></span>Our Mission</a> 
        </div>
    </div>

Example CSS

div img#header{
    width: 50%;
    height: 15%;
    margin-left: 125px;
    margin-right: auto;
}center input#search{
    width: 300px;
    height: 45px;
    border: solid 1px black;
    margin-top: 55px;
    font-size: 25px;
}center button#searchbutt{
    border: solid 1px black;
    width: 65px;
    height: 30px;
}#searchbutt:hover{
    color: #FFF;
    background-color: #000;
}#searchbutt{
    background-color: #FFF;
    color: #000;
}#links{
    height: 40px;
    width: 100%;
    text-align: center;
    line-height: 40px;
}.home{
    width: 80px;
    text-align: center;
    height: 40px;
    background-color: white;
    color: black;
    padding-left: auto;
    padding-right: auto;
    display: inline-block;
    border: solid 1px black;
    vertical-align: middle;
}.DL{
    width: 95;
    text-decoration: none;
    text-align: center;
    height: 40px;
    background-color: white;
    color: black;
    padding-left: auto;
    padding-right: auto;
    display: inline-block;
    border: solid 1px black;
}.home a{
    text-decoration: none;
    color: gray;
}.DL a{
    text-decoration: none;
    color: gray;
}div center a#DLbutt{
    border: solid 1px black;
    width: 100px;
    height: 50px;
    background-color: black;
}div center a#DLbutt{
    text-decoration: none;
    color: gray;
}#download{
    padding-top: 30px;
}html{
     background-image: url("watermark.gif");
}.home a span{
     position:absolute; 
     width:100%;
     height:100%;
     top:0;
     left: 0;
     display: inline-block;
     vertical-align: middle;
     line-height: normal;
}

I need the "Our Mission part" to be in the same div.

Why do you have the rule for `.home a span` which sits on top of the entire page? — j08691, May 20 '15 at 15:03
Also, setting the line-height to match the height of your divs works only for vertically centering a single line of text. You could fix this easily by making the .home divs 90px wide instead of 80. http://jsfiddle.net/j08691/h2hchg2q/6/ — j08691, May 20 '15 at 15:09
have you consider adding * word-wrap: break-word;*? In the home class — cubanGuy, May 20 '15 at 15:10
don't use `line-height:40px` to control the padding just use it on `` tag something like `padding: 20px`. AVOID using selectors like `button#searchbutt` when you define ID `#searchbutt` its already unique so no need to add the DOM element to it... this is bad practice use — MonteCristo, May 20 '15 at 15:29

UsainBloot · Answer 1 · 2015-05-20T15:18:35.167

You need to set the display to be display: table-cell for div.home and then remove the line-height you have set for these. This should automatically align the text for you.

div img#header {
    width: 50%;
    height: 15%;
    margin-left: 125px;
    margin-right: auto;
}
#links {
    height: 40px;
    margin-left: 125px;
    text-align: center;
    display: inline-block;
}
.home {
    width: 80px;
    text-align: center;
    height: 40px;
    background-color: white;
    color: black;
    padding-left: auto;
    padding-right: auto;
    display: table-cell;
    border: solid 1px black;
    vertical-align: middle;
}
.home a {
    text-decoration: none;
    color: gray;
}

http://jsfiddle.net/03syn1to/

Danny '365CSI' Engelman · Answer 2 · 2023-07-13T20:06:09.197

0

Modern Web Components solution: `<fit-text>`

You can do this with the <fit-text> Web Component, see: https://fit-text.github.io

<script src="https://fit-text.github.io/element.js"></script>

<style>
  fit-text {
    width:25vw;
    border:1px solid blue;
  }
</style>

<fit-text>Hello Cool<br>Web Component<br>World!</fit-text>

edited Jul 13 '23 at 20:06

answered Jul 13 '23 at 20:01

Danny '365CSI' Engelman

16,526
2
32
49

score -3 · Accepted Answer · answered May 20 '15 at 15:11

I believe this is what you are asking for. You want the "Our Mission" to be in the button vertically. Just update with this code. And it should work. Let me know what you think.

.home{
   width: 80px;
   text-align: center;
   height: relative;
   background-color: white;
   color: black;
   padding-left: auto;
   padding-right: auto;
   display: inline-block;
   border: solid 1px black;
   vertical-align: middle;
}

I changed the height.. height: relative;

`relative` isn't a valid value for `height`. – j08691 May 20 '15 at 15:48 — j08691, May 20 '15 at 15:48

Make text fit in div

3 Answers3

Modern Web Components solution: <fit-text>

Modern Web Components solution: `<fit-text>`