强制 h1 保持在 1 行

Question

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.

Answer 1

我认为您正在寻找的是 CSS 属性white-space: nowrap;

Answer 2

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

Answer 3

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/

Answer 4

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>

Answer 5

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>

Answer 6

元素（空白：nowrap；溢出：隐藏；）