JavaScript 实现指定长度自动换行函数

问题背景与解决方案概述

在网页制作中，经常遇到英文或长字符串将表格撑开导致布局变形的情况。虽然可以通过设置样式 table-layout:fixed;word-wrap:break-word;word-break:break-all 来尝试解决，但这有时会导致内容被截断或隐藏，无法实现真正的自动换行效果。

为此，编写了一个简单的JavaScript函数来弥补这一缺陷。该函数提供了一种思路，通过编程方式控制文本换行，以解决上述布局问题。

function fnAddBr(id, iPerLineLen){.....}

其中，id 参数指定需要处理的文本块元素的ID，iPerLineLen 参数定义每行的最大字符长度。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Untitled Document</title>

</head>

<body>

<script type="text/javascript">

//函数功能：在指定长度处自动添加换行符，以英文长度为准，及8代表8个英文或4个汉字

自动换行函数实现逻辑

function fnAddBr(id, iPerLineLen){

var sStr=document.getElementById(id).innerHTML;

if(sStr.replace(/[^\x00-\xff]/g,"xx").length <= iPerLineLen){

return -1;

var str="";

var l=0;

var schar;

for(var i=0;schar=sStr.charAt(i);i++){

str+=schar;

l+=(schar.match(/[^\x00-\xff]/)!=null?2:1);

if(l>= iPerLineLen){

str+="<br />\n";

l=0;

document.getElementById(id).innerHTML=str;

</script>

HTML示例与调用方法

<div id="content" style="border:1px solid #ccc">

我在做网页的时候添加的内容在生成网页后总是横向把表格撑的很宽，很难看；

我在加了

style="table-layout:fixed;word-wrap:break-word;word-break:break-all"

这个代码后，表格倒是不会撑宽了，可是内容又显示不完全了，只是显示表格一样的宽度的内容，其他的被遮挡或是过滤掉了。

我的是汉字，这个有关系吗？

请问有什么方法可以让在表格中的文字到多少字的时候就自动换一行？或是能换行又不撑大表格，而且不略去内容！

我的内容是在动易中调用的这个标签！

</div>

<div id="content1" style="border:1px solid #ccc">

我在做网页的时候添加的内容在生成网页后总是横向把表格撑的很宽，很难看；

我在加了

style="table-layout:fixed;word-wrap:break-word;word-break:break-all"

这个代码后，表格倒是不会撑宽了，可是内容又显示不完全了，只是显示表格一样的宽度的内容，其他的被遮挡或是过滤掉了。

我的是汉字，这个有关系吗？

请问有什么方法可以让在表格中的文字到多少字的时候就自动换一行？或是能换行又不撑大表格，而且不略去内容！

我的内容是在动易中调用的这个标签！

</div>

<script type="text/javascript">

fnAddBr("content",25);

fnAddBr("content1",50);

</script>

</body>

</html>