jsp页面,当要显示的文本内容过多时,用省略号代替

3 篇文章 0 订阅


//当要显示的文本内容过多时,用省略号表示(由overflow:hidden;    text-overflow:ellipsis;    white-space:nowrap; 这三个属性设置);当鼠标定位到该处时,又可完整显示出来(由title属性设置)

<html>
<body>

<h3>This is a header</h3>
<p>This is a paragraph.</p>

<style>  
  .ellipsis_div{  
    overflow:hidden;  
    text-overflow:ellipsis;  
    white-space:nowrap;  
    
  }   
  </style> 

  <div   class=ellipsis_div    
  style="width:120px;background-color:#cc88ff;" title="somelongtextsomelongtext">somelongtextsomelongtext</div> 

  <div   class=ellipsis_div    
  style="width:110px;background-color:#dddddd;">some   long   text</div>

</body>
</html>


//当列的内容过多时,用省略号表示,当鼠标定位到该处时,又可完整显示出来
/*注意,不能直接在<td>里面添加那些属性,例如<td style="width:120px;background-color:#cc88ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="somelongtextsomelongtext"> ,要在<td>下在使用<div>来设置。*/


<html>
<body>

<h3>This is a header</h3>
<p>This is a paragraph.</p>

<table>
<td>
  <div style="width:120px;background-color:#cc88ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="somelongtextsomelongtext">
somelongtextsomelongtext
</div>
</td>
<td>
<div style="width:110px;background-color:#dddddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="some   long   text">some   long   text</div>
</td>
</table> 

 
</body>
</html>

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值