Bootstrap Table 单元格内容过长显示问题

article/2025/11/6 3:36:24

遇到这个问题：网上查了很多方法，单元格内容显示过长，通过下面的样式控制，可以实现精简显示(文末奉上，样式说明）

给表格添加样式：

table {

table-layout:fixed;

}

给每个单元格添加下面的样式：

table td{

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

}

效果如下：

但是：再这样操作之后我遇到了新的问题；表格表头很长的时候，就有新的问题。

表格错位，内容显示不清。

解决办法：

给表格添加样式修改成

table {

table-layout : automatic;

}

但是，列宽度根据内容长短不一，单元格内容没有精简显示，还要做下面一步

给单元格添加的样式：增加一个宽度

table td{

max-width: 58px;

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

}

最终效果就达到了。

隐藏了，自然要要显示，可以在单元格上添加一个事件 hover

table td:hover {

overflow: auto;
white-space: pre-wrap;

}

即可实现鼠标移上就可以友好显示了。

（还可以加上一个单元格点击事件，去掉添加的样式，直接一行完全显示）

table td{max-width: 58px;
}

ps:目前尝试的连接符为中文顿号(、)，其他连接符不确定。欢迎留言讨论。

CSS 样式说明：

overflow：

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

white-space：

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

text-overflow：

table-layout：属性用来显示表格单元格、行、列的算法规则

automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。