Jump to content
newcoder1010

How to break a heading

Recommended Posts

Hello,

I have a heading tag:

<h1> We buy cars city</h1>

I like to break it as "we buy cars"  (one line) and then "city" goes to second line. I can not break it in html. How to break it in two lines and then center the both lines?

 

Thank you!

Share this post


Link to post
Share on other sites

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

Share this post


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.

Share this post


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>
	

 

Share this post


Link to post
Share on other sites

Give css property display flex and text-align center.

 

<!DOCTYPE html>
<html>
<head>
  <style>
    h1{
      display:flex;
      text-align : center;
    }
  </style>
</head>
<body>
<h1> We buy cars <br/>city </h1>
</body>
</html>

Share this post


Link to post
Share on other sites

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...