`
bolan392
  • 浏览: 273977 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

截断大文本并以省略号替代的样式

    博客分类:
  • CSS
阅读更多

  在HTML页面的表格中显示长时,表格总是会因为文字过多而拉伸变形,所以通常需要截断文本,并在后面添加省略号,当鼠标移动上来时再弹出全部内容的提示,要做到这种效果,则需要经过以下几步:

  首先,定义以下CSS样式表:

.title
{
          width:150px;
          white-space:nowrap;
          word-break:keep-all;
          overflow:hidden;
          text-overflow:ellipsis;
}

  其次,将需要显示的文本放在DIV中,让DIV应用以上样式表:

<div class="title" title=" 一段很长很长很长很长很长很长很长很长的文字">
	一段很长很长很长很长很长很长很长很长的文字		
</div>

这样,DIV中的文本就会自动截断显示,并使用省略号替代截断的部分,当鼠标移动到DIV上时,则会弹出完整文字的提示。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics