首页 > 其他 > 详细

标签内显示文字超过行宽度显示省略号

时间:2016-11-15 13:37:31      阅读:260      评论:0      收藏:0      [点我收藏+]

在table中或者一些特殊的需求情况下,需要展示部分文字并在title中显示全部信息,例如一个简短的说明如果超过15个字就显示省略号

技术分享

以前自己做的时候都是通过js或者razor语法来实现,但是这样却有一个缺陷,不能自适应页面或者说屏幕的分辨率。当屏幕分辨率改变时,页面就会变形了。

这里给出一个解决方案,采用css技术来实现相应的功能。

页面代码如下:

 <td>
         <a class="textbox" title="@(item.Note == null ? "" :item.Note)">@item.Note</a>
</td>

用a标签把要显示的内容包括起来,其中加上title,class 

css代码:

.textbox{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    display: block;
    word-break: break-all;
    word-wrap: break-word;
}

这样就实现了页面自适应显示部分文字,全部内容在title中显示。

有问题以后再改进。

标签内显示文字超过行宽度显示省略号

原文:http://www.cnblogs.com/zhaokunbokeyuan256/p/6064896.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!