ansaurus

Question

Make <h1> tag the same maximum width regardless of capitalization of text within

Answer 1

+1 A:

You could fix the width and hide the overflow, style="width: Xpx; overflow: hidden;"

That will limit the width and cut off the end if it's too wide.

MrZebra 2008-10-03 21:38:44

Answer 2

+3 A:

When you say "cut off the end dynamically", am I wrong in assuming that a CSS rule like:

h1 {
    width: 400px; /* or whatever width */
    overflow: hidden;
}

would "cut the end off" as you want?

David Heggie 2008-10-03 21:39:01

if you add text-overflow:ellipsis the cut-off will be nice "…"

porneL 2008-10-12 20:41:41

oh, and white-space:nowrap of course.

porneL 2008-10-12 20:42:23

text-overflow isn't very widely supported though ...

David Heggie 2008-10-16 20:17:07

Answer 3

+1 A:

MrZebra is right in how to hide the overflow, but if there's an attractive fixed width font you want to use you can set it with CSS font-family, just be sure to give it a fallback for people without the font.

You could also use CSS to enforce the capitalization with 'text-transform', if you wanted (though from your reading, that's not your desire).

font-variant:small-caps might work, too.

Jeff 2008-10-03 21:43:16

Answer 4

+7 A:

Control the Overflow

The real trick is just setting a limit on size of the text box, and making sure that there aren't overflow problems. You can use overflow: hidden to take care of this, and display: block the element in order to give it the exact dimensions you need.

Monospace is Optional

Yes, you can use a monospace font.. there are only a few to choose from if you want a cross-browser solution. You can use a variable-width font, too.. the monospace will just help you get consistency with the capitalization problem you described. Using a monospace font will help you to choose a good width that will work for different text lengths. In my example below, I've arbitrarily chosen a width of 250 pixels, and typed strings until they were well past the limit, just for the purposes of illustration.

Line-heights and Margins

You want the line height of the text to match the height of the box.. in this case, I've used 20 pixels. If you need to create line height, you can add a bottom margin.

Side note: I've used an h3 here, because the text is repeated many times across the page. In general it's a better choice to use a lower level of header for more common text (just a semantic choice). Using an h1 will work the same way..

<html>
<head>
<title>h1 stackoverflow question</title>
<style type="text/css">

* { margin:0; padding:0 }

h3 { 
    display: block;
    width: 250px;
    height: 20px;
    margin-bottom: 5px;
    overflow: hidden;
    font-family: Courier, Lucidatypewriter, monospace;
    font: normal 20px/20px Courier;
    border: 1px solid red;
}

</style>
</head>
<body>

<h3>Hello, World</h3>
<h3>Lorem Ipsum dolor sit Amet</h3>
<h3>Adipiscing Lorem dolor sit lorem ipsum</h3>
<h3>&quot;C&quot; is for Cookie, that's good enough for lorem ipsum</h3>
<h3>Oh, it's a lorem ipsum dolor sit amet.  Adipiscing elit.</h3>

</body>
</html>

keparo 2008-10-03 21:56:30

You missed changing the ending tags to h3 as well. Voted up in anticipation of the change.

davebug 2008-10-03 22:07:16

Ha, thanks.. Bugs abound. All fixed up.

keparo 2008-10-03 22:12:55

Answer 5

A:

You could try using javascript to programmatically test to see the width of the font, and if it's too large, take it down a step and try again. Instead of testing the width, see if the height of the element is more than one line (measured in ems, since you'll be changing the font size around).

var fontSize = "200%";  // your regular heading font size
var h1 = document.getElementById("myHeading");
while (h1.offsetHeight > oneLine) {
    fontSize *= (parseInt(fontSize) - 5) + "%";
    h1.style.fontSize = fontSize;
}

you'll have to figure out that "oneLine" bit for yourself, sorry.

nickf 2008-10-03 22:08:23

Answer 6

+2 A:

You could also try an ellipsis solution. Truncate the text at a maximum width and apply an ellipsis. Something like:

My title is way too long for this...

CSS3 has text-overflow: ellipsis you can use, but it's not supported in Firefox.

Hedger Wang has found a workaround that I have used a couple times. Pretty handy.

jeff.willis 2008-10-03 22:17:40

This looks most like what I want, but it looks quite involved to set up.

Greg 2008-10-06 16:27:45

Answer 7

A:

Rather than trying to constrain the height of your <h1> I would adjust your CSS to make your site more fluid - afterall, you don't want your site to appear broken if the user increases their text size.

Try setting the h1's height in ems rather than pixels. If you add this to your CSS:

body {
    font:62.5%/140% Courier, Lucidatypewriter, monospace;
}

It will make 1em = 10px, so then you can set your heading's height to:

h1, h3 {
    ....
    height:2em;
    ....
}

Hope this helps.

Ian Oxley 2008-10-07 12:32:19

Answer 8

A:

thanks.........

castex 2009-11-27 00:37:23

ansaurus

tags:

views:

answers:

Make <h1> tag the same maximum width regardless of capitalization of text within

related questions