当前位置: 代码迷 >> Web前端 >> 如何控制 显示 DIV 里面的 字数 只显示部分文字
  详细解决方案

如何控制 显示 DIV 里面的 字数 只显示部分文字

热度:1214   发布时间:2012-09-21 15:47:26.0
怎么控制 显示 DIV 里面的 字数 只显示部分文字
在 DIV 里面加如下 样式就可以了。

<div style= "height:40px; width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">   高度可自己设定


-----------------------

引用

  <!-- 主显DIV 管理公告信息start -->
   
            <div style="margin-top:20px;margin-left:6px;margin-right:6px;border:1px solid silver;">
         <table  style="width:100%;font-size: 11px;">
            <tr>
               <td bgcolor="#DBEAF8">
                   <font size=2px>  公告管理</font>
                   &nbsp;&nbsp;&nbsp;&nbsp;
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              
                <input type=button value="发布公告信息" onClick="uploadInfo()"/>
               </td>
            </tr>
             <!-- 循环体start -->
            <c:forEach items="${resultMap.list}" var="result">
             <tr>
               <td>
                 <div style="border:1px solid silver;">
                   <table style="width:100%;font-size: 11px;">
                      <tr>
                         <td>
                           <div>
                            <table   width="100%" style= "border:1px solid silver;table-layout: fixed" >
             <tr>
              <td width="15" align="left"><img src="images/ad-sdImages/gg02.jpg"/></td>
               <td width="70" align="left">
                  <font size=1 color="blue"><a style="text-decoration: none;" href="">
               <c:if test="${result.asType==-1}">[系统公告]</c:if>
               <c:if test="${result.asType==20}">[政策公告]</c:if>
               <c:if test="${result.asType==21}">[出票公告]</c:if>
               <c:if test="${result.asType==22}">[财务公告]</c:if>
                  </a></font>
               </td>
                <td align="left"><font size=1 color="blue"><a href="">${result.asTitle}</a>    [发布人:${result.asPromulgator}][点击数:${result.readSum}][发布时间:${result.asIssueTime}]</font></td>
                <td width="130px" align="right">
                <a style="text-decoration: none;">
                <font size="1" color="blue">[置顶][取消置顶][编辑][删除]</font>
                </a>
                </td>
             </tr>
             <tr>
                <td align="left" colspan="4"><div style= "height:40px; width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"><font size=2 color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${result.asContent}</font></div></td>
             </tr>
         </table>
                           </div>
                         </td>
                      </tr>
                   </table>
                  
                 </div>
               
               </td>
            </tr>
         </c:forEach>
            <!-- 循环体end -->
            
         </table>
        
         <!-- 分页脚 -->
          <table style="width: 100%">
      <tr>
      <td align="right">
         <table>
            <tr>
      <td><a style="text-decoration: none" href="flightInfo.do?p=flightInfoSearch&page=1&passenger=${flightMap.passenger}&flightNo=${flightMap.flightNo}&ticketNo=${flightMap.ticketNo}&ticket_All=${flightMap.ticket_All}&phone=${flightMap.phone}&takeOff_time=${flightMap.takeOff_time}&takeOff_time02=${flightMap.takeOff_time02}&input_time=${flightMap.input_time}&input_time02=${flightMap.input_time02}&receive_time=${flightMap.receive_time}&receive_time02=${flightMap.receive_time02}"><font size="1px" color="blue">[首     页]</font></a></td>
   <td><a style="text-decoration: none" href="flightInfo.do?p=flightInfoSearch&page=${flightMap.page-1}&passenger=${flightMap.passenger}&flightNo=${flightMap.flightNo}&ticketNo=${flightMap.ticketNo}&ticket_All=${flightMap.ticket_All}&phone=${flightMap.phone}&takeOff_time=${flightMap.takeOff_time}&takeOff_time02=${flightMap.takeOff_time02}&input_time=${flightMap.input_time}&input_time02=${flightMap.input_time02}&receive_time=${flightMap.receive_time}&receive_time02=${flightMap.receive_time02}"><font size="1px" color="blue">[上一页]</font></a></td>
   <td><a style="text-decoration: none" href="flightInfo.do?p=flightInfoSearch&page=${flightMap.page+1}&passenger=${flightMap.passenger}&flightNo=${flightMap.flightNo}&ticketNo=${flightMap.ticketNo}&ticket_All=${flightMap.ticket_All}&phone=${flightMap.phone}&takeOff_time=${flightMap.takeOff_time}&takeOff_time02=${flightMap.takeOff_time02}&input_time=${flightMap.input_time}&input_time02=${flightMap.input_time02}&receive_time=${flightMap.receive_time}&receive_time02=${flightMap.receive_time02}"><font size="1px" color="blue">[下一页]</font></a></td>
   <td><a style="text-decoration: none" href="flightInfo.do?p=flightInfoSearch&page=${flightMap.count}&passenger=${flightMap.passenger}&flightNo=${flightMap.flightNo}&ticketNo=${flightMap.ticketNo}&ticket_All=${flightMap.ticket_All}&phone=${flightMap.phone}&takeOff_time=${flightMap.takeOff_time}&takeOff_time02=${flightMap.takeOff_time02}&input_time=${flightMap.input_time}&input_time02=${flightMap.input_time02}&receive_time=${flightMap.receive_time}&receive_time02=${flightMap.receive_time02}"><font size="1px" color="blue">[尾     页]</font></a></td>
       <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
       <td><font size="1px">共${flightMap.count}页&nbsp;当前第${flightMap.page}页</font></td>
     <td><font size="1px">共有数据${flightMap.sum}条</font></td>
     </tr>
     </table>
      </td>
      </tr>
  </table>
        
        
    </div>
      
    <!-- 主显DIV 管理公告信息end -->
 
  相关解决方案