居中显示两行字(补充)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> a{cursor: pointer;} ul{padding:0;border:0;margin:0;} ul li{list-style-type:none;} .ylBox{width:300px;background-color:#f2f2f2;height:500px;padding:20px;} .ylBox .ul{display:table;width:100%; vertical-align: middle;} .ul li{background-color:#FFF;} .ul .child{width:300px;display: table-cell;height: 60px;overflow: hidden;vertical-align: middle;} .ul .child .twoChild{max-height:35px;word-break: break-all;overflow: hidden;padding: 0 10px;vertical-align: middle;} .ul .child:hover{background-color:#000;color:#FFF;} .ul a{display:inline-block;} </style> </head> <body> <div class="ylBox"> <ul class="ul"> <li> <a class="child" href=""> <div class="twoChild"> 我是个很长很长很长很长的名字哦 </div> </a> </li> </ul> </div> </body> </html>
之前是没有在a里面加div,怎么调试都没有办法显示两行并且居中,加了div问题就解决了