html中如何让td里面的文字 遇到数字就自动换行

Posted 2023-04-20

参考技术A 给table加个id，如：<table
width="200"
border="1"
id="result">然后遍历其下的所有td，替换字符，写一个函数，让他在页面载入完成后执行。 function
numAddBr()
var
tr
=
document.getElementById('result').getElementsByTagName("tr");
for
(var
i=1;i<tr.length;i++)

var
td
=
tr[i].cells.length;
for(var
j=0;j<td;j++)
tr[i].cells[j].innerhtml
=
tr[i].cells[j].innerHTML.replace(/([\d]+)([^\d]+)/g,'$1<br/>$2');



window.onload
=
numAddBr; 这是代码。我给你加了简单的判断，当内容是以数字结尾的时候，则不再加换行，如果数字出现在内容的中间部分或者开头则在其后添加换行。你也可以自己去掉，把
replace(/([\d]+)([^\d]+)/g,'$1<br/>$2');
改成
replace(/([\d]+))/g,'$1<br/>');

CSS如何隐藏td里面超出的文字？

参考技术A

display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

一般的文字截断（适用于内联与块）：

.text-overflow
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

参考技术B display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/