<a>の中の言葉がオーバーフローしています。どうすれば解決できますか？

Question

これは私のHTMLコードの一部です：

<div id="content" class="row"> 
     <div id="tab1" class="col-md-3 col-sm-4"> 
     <div class="panel panel-primary"> 
    <div id="login-title" class="panel-heading"> Customer Login </div> 
     <div class="panel-body"> 
     <form class="form-horizontal" action="index.html" method="post" role="form"> 
      <div class="form-group"> 
      <label class="label_login">Login Name:</label> 
      <input id="input_login" type="text" name="user_name" value="" class="form-control" placeholder="Enter the Login Name."> 
      <label class="label_login">Password:</label> 
      <input id="input_login" type="password" name="user_password" value="" class="form-control" placeholder="Enetr the Password."> 
      <button id="btn_login" type="login" name="btn">Login</button> 
      </div> 
     </form> 
     </div> 
     <div id="login-title" class="panel-heading"> Company News </div> 
     <div class="news"> 
      <h2> Aug 12, 2016 </h2> 
      <a href="#" target="_blank"> ...</a> 
      <h2> Jun 23, 2016 </h2> 
      <a href="#" target="_blank">...</a> 
      <h2> Dec 06, 2015 </h2> 
      <a href="#" target="_blank">...</a> 
      <h2> Oct 10, 2014 </h2> 
      <a href="#" target="_blank">...</a> 
      <h2> Jul 22, 2014 </h2> 
      <a href="#" target="_blank">...</a> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-9 col-sm-8"> 
    Main 
    </div> 
</div> 

これは私が得る結果である：

それは言葉がオーバーフローしていることを明らかです。 widthとoverflow（.news a）を試しましたが、動作しませんでした... 何が問題なのですか？