html - <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 中)但它们没有用... 怎么了？？

Answer 1

解决方案 1(简短，如果您不关心隐藏 URL 的某些部分):

.news a {
    display:block;
    overflow:hidden;
}

解决方案 2(简短，如果您不关心隐藏 URL 的某些部分):

.news {
    overflow:hidden;
}

解决方案 3:

.news a {
    overflow-wrap: break-word;
    word-wrap: break-word; /* legacy version */
}