Jump to content

How to break a heading


Recommended Posts

Example of 'dsonesuk's suggestion:

	<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
	<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
	<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
 h1 { width: 20em; margin: 0 auto;
      text-align: center;
      background: wheat; color: magenta;
    }
</style>
	</head><body>
	<h1> We buy <br> cars city</h1>
	<script>
	</script>
	</body></html>

BTW, welcome to the forums.

Edited by JMRKER
Link to post
Share on other sites

I usually give the tag a max-width in ems so that regardless of font size it always breaks at the same place. This solution requires no change to the HTML.

Add text-align: center and a left and right margin of auto to keep it all centered.

Link to post
Share on other sites

Here is 'Ingolme's suggestion in a test script.  Very similar to original but without <br>

	    <!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
    <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
    <!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
 h1 {
/*      width: 20em;  /* single line */
      margin: 0 auto;
      text-align: center;
      background: wheat; color: magenta;
    }
 h1.vertLine { width: 3em; }    /* single vertical line */
 h1.twoLines { width: 5em; }    /* two horiz. lines */
</style>
    </head><body>
    <h1 class='vertLine'> We buy cars city</h1>
<hr>
    <h1 class="twoLines"> We buy cars city</h1>
<hr>
    <h1> We buy cars city</h1>
<hr>
    <script>
    </script>
    </body></html>
	

 

Link to post
Share on other sites
  • 2 weeks later...
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...