I've been trying to use CSS to style my <h1> element in a specific way, but it seems the default browser behavior is getting in the way:
https://i.sstatic.net/oRR5N.png
Despite my efforts, the browser continues to display it like this:
https://i.sstatic.net/26Zz0.png
Anyone have any suggestions on how I can achieve the desired styling properly?
Current code:
.title {
width: 300px;
float: left;
line-height: 68px;
display: inline-block;
}
.title h1 {
font-size: 42px;
line-height: 58px;
color: #FFF;
background: #000;
white-space: normal;
word-wrap: break-word;
display: inline-block;
vertical-align: bottom;
}<div class="title">
<h1>This is a title on two lines</h1>
</div>