我在html页面单击时弹出可编辑文本框，在文本框中写的内容保存到页面时，内容无法自动换行（内容会挤压其它单元格），
设置td的宽度也没用，各位高手不知有什么好的解决方法吗？
html页面：
<td class="editable" style="text-align:left;"></td>
js：
//单击表格编辑事件
function register(){
//可编辑框的单击事件
$(".editable").click(function(){
if(!truee){return false;}
value = $(this).html();
$(this).html("");
$("<textarea>"+value+"</textarea>").appendTo($(this));
$(this).children().css("position","absolute");
$(this).children().focus();
truee = false;
editevent();//注册编辑框事件：按回车键时、失去焦点时
});
function editevent(){
//注册编辑框按回车键事件
$(".editable").children().keyup(function (event) {
var keycode = event.which;
if (keycode == 13) {//按了回车键
//另起一行
ss=$(this).val()+"<br/>";
$(this).val(ss);
}
});
//注册下拉选择框按回车键事件
$(".selectable").children().keyup(function (event) {
var keycode = event.which;
if (keycode == 13) {//按了回车键
//另起一行
value = $(this).val();
$(this).parent().html(value);
$(this).remove();
truee = true;
}
});//注册编辑框事件：按回车键时、失去焦点时
function editevent(){
//注册编辑框按回车键事件
$(".editable").children().keyup(function (event) {
var keycode = event.which;
if (keycode == 13) {//按了回车键
//另起一行
ss=$(this).val()+"<br/>";
$(this).val(ss);
}
});
//失去焦点时事件
$(".editable,.selectable").children().blur(function(){
value = $(this).val();
$(this).parent().html(value);
$(this).remove();
truee = true;
});
}
设置td的宽度也没用，各位高手不知有什么好的解决方法吗？
html页面：
<td class="editable" style="text-align:left;"></td>
js：
//单击表格编辑事件
function register(){
//可编辑框的单击事件
$(".editable").click(function(){
if(!truee){return false;}
value = $(this).html();
$(this).html("");
$("<textarea>"+value+"</textarea>").appendTo($(this));
$(this).children().css("position","absolute");
$(this).children().focus();
truee = false;
editevent();//注册编辑框事件：按回车键时、失去焦点时
});
function editevent(){
//注册编辑框按回车键事件
$(".editable").children().keyup(function (event) {
var keycode = event.which;
if (keycode == 13) {//按了回车键
//另起一行
ss=$(this).val()+"<br/>";
$(this).val(ss);
}
});
//注册下拉选择框按回车键事件
$(".selectable").children().keyup(function (event) {
var keycode = event.which;
if (keycode == 13) {//按了回车键
//另起一行
value = $(this).val();
$(this).parent().html(value);
$(this).remove();
truee = true;
}
});//注册编辑框事件：按回车键时、失去焦点时
function editevent(){
//注册编辑框按回车键事件
$(".editable").children().keyup(function (event) {
var keycode = event.which;
if (keycode == 13) {//按了回车键
//另起一行
ss=$(this).val()+"<br/>";
$(this).val(ss);
}
});
//失去焦点时事件
$(".editable,.selectable").children().blur(function(){
value = $(this).val();
$(this).parent().html(value);
$(this).remove();
truee = true;
});
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="editplus" />
<meta name="author" content="[email protected]" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
td {
word-break: break-all;
width: 100px;
}
</style>
</head><body>
<table border=1>
<tr>
<td>换行换行换行换行换行换行</td>
<td>222222222222222222222</td>
</tr>
<tr>
<td>3222 123123 123123 123 123 </td>
<td>4</td>
</tr>
</table>
</body>
</html>