vuex—table表头不自动换行了

Posted 2023-05-15

不自动换行了。可以这样解决，我们可以利用 css 样式中的 white-space，把文本区域的样式设置为： white-space: pre-line;， 就可以很方便的解决。

注意不要使用 white-space: pre-wrap;，该样式会把前后空格也保留了，会出现对齐异常。

拓展知识
white-space 可配置的值如下：

normal
连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。

nowrap
和 normal 一样，连续的空白符会被合并。但文本内的换行无效。

pre
连续的空白符会被保留。在遇到换行符或者
元素时才会换行。

pre-wrap
连续的空白符会被保留。在遇到换行符或者
元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。

pre-line
连续的空白符会被合并。在遇到换行符或者
元素，或者需要为了填充「行框盒子(line boxes)」时会换行。 参考技术A vuex—table表头不自动换行，可以用下面方法设置
使用Table组件自带的show-overflow-tooltip属性
参数说明类型可选值默认值show-overflow-tooltip当内容过长被隐藏时显示 tooltipBoolean—false
添加该属性之后，如果内容超出列宽，超长部分会默认省略。当鼠标滑过该内容时，会弹出Tip提示
<!--示例-->
<el-table-column
prop="departName"
label="部门"
show-overflow-tooltip
>
</el-table-column>

table中td中内容如何实现自动换行

1、 页面中设置table宽度，一般如果字符串长度超过设置的单元格宽度后 会自动换行。但是如果字符串中没有空格以及标点符号它不会自动换行的。 字符串已经超过设置的单元格宽度 但是就是没有换行。如果字符串中有空格或者标点符号就可以。汉字组成的字符可以实现自动换行就算没有任何符号空格都行。如果纯字母组成的字符串就不行 2 下面这种情况也是 使用上面的代码调整过来的。 页面table中一行两列，但是虽然设置了左边td的宽度，但是丝毫不起作用。设置右边td的宽度亦如此，但是在table中加上上面加粗红色属性即可 参考技术A 1.（IE支持）
关键词：table-layout: fixed 及 word-wrap: break-word
<table style="table-layout:fixed" width="200" bgcolor="#f7f7f7">
//是否自动换行
<tr>
<td style="word-wrap:break-word"> //一个很长的单词遇到换行要拆开
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA </td>
</tr>
</table>

2.（Firefox 或其他浏览器支持）
/* Browser specific (not valid) styles to make preformatted text wrap */
pre
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

3.（Firefox支持）
<td><script language="javascript" type="text/javascript" defer="defer">javascript:(function()var D=document; F(D.body); function F(n)var u,r,c,x; if(n.nodeType==3) u=n.data.search(/\S/); if(u>=0) r=n.splitText(u+10); n.parentNode.insertBefore(D.createElement("WBR"),r); else if(n.tagName!="STYLE" && n.tagName!="SCRIPT")for (c=0;x=n.childNodes[c];++c) )();</script></td>