table中td内容自动换行

古城微笑少年丶 2022-09-17 06:14 178阅读 0赞

网页开发过程中时常会遇到关于折行和不折行的问题。

比如连续英文或符号时，即使定义了宽度，文本还是没法折行，因为没有字符、字母里间隔的话，会当成一个单词。所以按不能折行来解析。

这时如果遇到了链接url，往往全是连续的英文和字母，这样就会把原本做好的页面搅乱。

而有的时候，我们希望强制不折行，或者某一链接不折行，或者折行时链接一起折行，而不会出现链接里两个字有断开的折行。

table-layout:   fixed          按照你定义的表格宽度或列宽显示数据，不受内容本身宽度影响。

**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>

**4.（IE5以下）**

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui table自动换行、自适应换行（已解决v2.4.5）

改样式前效果：不直观，超出内容没有自动换行，且不适应产品需求（超出部分需要自动换行） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW...

青旅半醒/ 2024年04月18日 17:33/ 0 赞/ 6 阅读

相关 table表格td内内容自动换行

项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行所以需要设置一下，让表格内

我不是女神ヾ/ 2022年12月30日 08:00/ 0 赞/ 226 阅读

相关 element table 组件内容换行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEy

分手后的思念是犯贱/ 2022年10月17日 04:07/ 0 赞/ 344 阅读

相关 table中td内容自动换行

网页开发过程中时常会遇到关于折行和不折行的问题。比如连续英文或符号时，即使定义了宽度，文本还是没法折行，因为没有字符、字母里间隔的话，会当成一个单词。所以按不能折行来解析。

古城微笑少年丶/ 2022年09月17日 06:14/ 0 赞/ 179 阅读

相关 JXL操作Excel内容自动换行

new WritableCellFormat().setWrap(true);//通过调整宽度和高度自动换行 new WritableSheet().setColumnVie

た入场券/ 2022年08月25日 09:10/ 0 赞/ 525 阅读

相关 display:table-cell;内容超出隐藏，table,td内容超出隐藏

display:table-cell;内容超出隐藏,和 table 标签一样需要设置 table-layout: fixed; 超出… white-space: nowr

待我称王封你为后i/ 2022年04月18日 06:31/ 0 赞/ 472 阅读

相关 React+antd table中的每列内容换行

1，效果图如下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

绝地灬酷狼/ 2022年02月19日 01:23/ 1 赞/ 950 阅读

相关用CSS实现Table中td强制不换行

<table> <tr> <td style="word-break: keep-all; ">There are content and it is very lon

向右看齐/ 2021年11月22日 12:32/ 0 赞/ 333 阅读

相关根据表格长度使td里的内容换行

<td style="word-wrap:break-word; word-break:break-all;" width="55">注册证号/备案凭证编号</td>

╰半夏微凉°/ 2021年09月26日 19:00/ 0 赞/ 263 阅读

相关 HTML中内容自动换行

自动换行需要对标签元素写css样式 .content { width: 100%; height: auto;

旧城等待，/ 2021年09月26日 15:46/ 0 赞/ 450 阅读