bootstrap之table列内容超出部分省略号
想让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;
tabletable
table-layout:fixed;
word-break:break-all;
}
table td>span{
display: inline-block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。