想让bootstrap的table列内容超出部分省略号,要在table上加table-layout:fixed和word-break:break-all,
然后在头部thead的th加上宽度百分比,最后在列里加个标签如span,
在这个span加上单行超出部分省略号的css:display: inline-block,overflow: hidden,white-space: nowrap,text-overflow:ellipsis即可
效果图:
HTML代码如下:
<table class="data-table table table-bordered table-hover table-responsive"> <thead> <tr> <th width="5%">序号</th> <th width="25%">活动主题</th> <th width="25%">营销内容</th> <th width="15%">营销时间</th> <th width="10%">创建者</th> <th width="20%">操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td data-class="xd-table-th"><span title="五一大放送">五一大放送</span></td> <td data-class="xd-table-th"><span title="五一大放送,全场五折起">五一大放送,全场五折起</span></td> <td><span title="2019-02-28">2019-02-28</span></td> <td><span title="Jwen">Jwen</span></td> <td> <a href="javascript:void(0);">编辑</a> <a href="javascript:void(0);">删除</a> <a href="javascript:void(0);">查看效果</a> </td> </tr> </tbody> </table>
css代码如下:
table{ text-align:center; table-layout:fixed; word-break:break-all; } table td>span{ display: inline-block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; }
原文地址:https://www.cnblogs.com/zzwlong/p/10454733.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。