CODEWITHSUNDEEP
htmlcss
Bas
Bas

Reputation: 53

forcing a h1 to stay in 1 line

I have a div with width and height at 250px. the h1 that is inside the div has a 50px height. People who add new stuff to my website can fill in whatever they want inside the box.

When the text at the h1 is too long the text goes to line 2 (see the picture and the box on the right).

my question is how can I force the h1 to stay within the box like the left box on the picture.

picture

Upvotes: 3

Views: 9579

Answers (6)

Nicat Hidayet-zade
Nicat Hidayet-zade

Reputation: 143

element (white-space: nowrap; overflow: hidden;)

Upvotes: 0

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

This is work around using javascript. What I did here is taking the height of the using script and from that we get the number of lines of content. Based on that value we are adjusting the font size.

Base font I applied here is 20px and line height is 50px. if the height we are getting is 100, there will be 2 lines of text and I reduced the font size to 20/2 and with this value, the text can be accommodated in one line.

If you find it helpful, you may fine tune. Cheers!

$(document).ready(function () {
                var actualHeight = $("h1 span").height();
                var fontSize = 20;
                var fontRatio;
                if(actualHeight > 50){
                    fontRatio = actualHeight/50;
                    fontSize = 20/fontRatio;
                    $("h1 span").css('font-size', fontSize);
                }
            });
h1{
                width: 300px;
                height: 50px;
                line-height: 50px;
                color: #000;
                background: #999;
                font-size: 20px;
                position: relative;
            }
            h1 span{
                position: absolute;
                top: 0;
                left: 0;
                width: auto;
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
            <span>
                orem ipsum dolor sit amet, orem ipsum dolor sit amet, consectetur adipiscing elitorem ipsum dolor sit amet, consectetur adipiscing elit
            </span>
        </h1>

Upvotes: 0

Johannes
Johannes

Reputation: 67738

If you want the text to fit into the line without having to scroll or expanding the width, your only option is reducing the font-size on the H1.

To do that automatically, you can use a JS plugin like FITTEXT: http://fittextjs.com/

Upvotes: 1

Mr.Pandya
Mr.Pandya

Reputation: 2038

you cant stay h in one line because parent has only width:250px;. So if you assign width:100% to children it takes only width:250px; only. Try using white-space:nowrap property if you requried

Check here

Upvotes: 1

David Hallberg J&#246;nsson
David Hallberg J&#246;nsson

Reputation: 862

You can use white-space: nowrap to prevent the text from wrapping. Optionally use overflow and text-overflow to control the behavior.

h1 {
  width: 100px;
  background: salmon;
}
.nowrap {
  white-space: nowrap;
}
.overflow {
  white-space: nowrap;
  overflow: hidden;
}
.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<h1 class="nowrap">Using white-space: nowrap</h1>
<h1 class="overflow">Using overflow: hidden</h1>
<h1 class="text-overflow">Using text-overflow: ellipsis</h1>

Upvotes: 0

Davide Ungari
Davide Ungari

Reputation: 1960

I think what you are looking for is the CSS property white-space: nowrap;

Upvotes: 10

Related Questions