Header:How to fix all the text in the header

Header:How to fix all the text in the header

The system does not display all the text in the title.  It displays Calculate a Pr... instead of Calculate A Price.
I used the same logic in a new page, and it displays all the text in the title.

My page has multiple page/header/content/footer in a page. I don't know that caused the problem.

Here is my code:

   <div data-role="page" id="divMainPage" runat="server" > <!-- divMainPage Begin -->
                   
                       <div data-role="header" data-theme="b"> 
                            <a href="#" id="hrefMain1" data-icon="back" >Back</a> 
                   <h1>Calculate a Price</h1> 
                               <div data-role="navbar">
                                     <ul>
                                        <li><a href="#" id="btnShowFlatRate" data-theme="b" data-role="button"                                                       runat="server" onserverclick="btnShowFlatRate_Click" ><span>Show                                                       Flat Rate Prices</span></a></li>
                                        <li> <a href="#" id="btnListPrices" data-theme="b" data-role="button">                                          <span>List Prices</span></a></li>
                                     </ul>
                              </div>
               </div>    

Any suggestions?
Thanks
Ta