CSS实现文字省略号显示

只能实现单行文字省略号显示(css方式),否则只能用js实现或sql语句处理

第一种div方式:

CSS设置文字超出范围时显示省略号...
1、创建CLASS
.hideNoticeText{
        width: 230px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
}
2、将CLASS应用到相应的文本标签上
    <div class="hideNoticeText"></div>

说明:div设置的宽度为230个像素,如果div中的文本超出这个宽度后就会以“...”进行显示

第二种table方式:

  1. <style type="text/css">  

  2.         table  

  3.         {  

  4.             table-layout: fixed;  

  5.             width: 100%;  

  6.         }  

  7.           

  8.         td  

  9.         {  

  10.             white-space: nowrap;  

  11.             overflow: hidden;  

  12.             text-overflow: ellipsis; 

  13.         }  

  14.     </style>  


你可能感兴趣的:(CSS实现文字省略号显示)