I am creating a simple webpage with fixed width text. Check out this sample HTML:
<div id ="wrap">
<h1>An Annoying Heading</h1>
<p>Some text some text some text some text some text some text some text some text some text some text</p>
</div>
These are the only elements within the body tags. The CSS code is as follows:
*{
padding: 0;
margin: 0;
}
#wrap{
width: 320px;
margin: 50px auto;
}
body{
font-family: calibri,tahoma,arial,sans-serif;
}
p{
text-align: justify;
font-size: 12pt;
padding-top: 0.4em;
}
h1 {
padding-bottom: 0.1em;
font-size: 26pt;
}
I want the heading to occupy the entire available width.
To match the div's width, I can adjust the font size accordingly, which usually works well.
However, if the browser cannot use Calibri, it looks at the font-family for an alternative. In such cases, the next available fonts appear larger than Calibri, causing the heading to wrap onto two lines instead of one.
Is there a solution to ensure that the heading spans the full width and remains on a single line regardless of the font used?