All geek questions in one place

Make the <h1> tag equal to the same maximum width, regardless of the capitalization of the text inside

I'm trying to show a series of titles from 60 characters to 160 or so, and capitalization varies, some of them are all caps, some halves. When it's mostly lowercase, all 160 characters of text correspond to the width I want, but when it starts to get more caps (they should be wider), it starts to flow.

Is there a way to use the attractive fixed witdh font (upper and lower case are the same) or dynamically compress the text to fit, or otherwise recognize how much space the text will take on the server side and cut the end dynamically? Or do you have a better solution?

+3
source share
7 answers

Overflow management

The real trick is to simply set a limit on the size of the text field and make sure there are no problems with overflow. You can use overflow: hidden to take care of this, and display: lock the element to give it the exact dimensions you need.

Monospaced optional

, . , -. . Monospace . , . 250 , , .

, . 20 . , .

: h3 , . , ( ). h1 .

<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 good enough for lorem ipsum</h3>
<h3>Oh, it a lorem ipsum dolor sit amet.  Adipiscing elit.</h3>

</body>
</html>
+9

" ", , , CSS:

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

" ", ?

+3

. . - :

...

CSS3 : , , Firefox.

Hedger Wang , . .

+2

, style="width: Xpx; overflow: hidden;"

, .

+1

MrZebra , , , , CSS, .

CSS "text-transform", ( ).

font-variant: small-caps .

+1

javascript , , , . , , ., ( ems, ).

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 will have to find out what the "oneLine" bit is for you, sorry.

0
source

Instead of trying to limit the height of your <h1> I would adjust your CSS to make your site more fluid - in the future, you don’t want your site to look broken if the user increases their text size.

Try setting the height of h1 in ems, not pixels. If you add this to your CSS:

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

It will do 1em = 10px, so you can set the course height:

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

Hope this helps.

0
source

Source: https://habr.com/ru/post/1697883/

More articles:


All Articles