Javascript 动态子对象正在扩展父对象的宽度

我有一个编辑器，可以在你打字时插入跨行包装的字母。这允许选择每个字母作为节点，以便应用样式。它们将在稍后的导出过程中展开

虽然我在父节点上设置了宽度，但子跨度节点并不像通常那样“换行”

在下面的示例代码段中，点击“添加字母包装的单词”按钮可以模拟如果要单击第一段并键入“test”时编辑器中发生的情况

以前，当跨距包装的单词到达父段落的宽度时，它们在下一行开始断裂。我不知道为什么他们不再是了。相反，它们正在扩展其父段落和列的宽度，同时保留在一行上

这是否是一个CSS问题，可能与使用

表格

和

表格单元格

显示属性有关

app={}；
app.addletwrappedword=函数（）{
var word=document.createElement（'span'）；
var字母；
字母=document.createElement（'span'）；
letter.innerText='t'；
单词。子单词（字母）；
字母=document.createElement（'span'）；
letter.innerText='e'；
单词。子单词（字母）；
字母=document.createElement（'span'）；
letter.innerText='s'；
单词。子单词（字母）；
字母=document.createElement（'span'）；
letter.innerText='t'；
单词。子单词（字母）；
app.p0.appendChild（word）；
var space=document.createElement（'span'）；
space.innerHTML=''；
app.p0.appendChild（空格）；
}
app.add0=document.getElementById（'add0'）；
app.p0=document.getElementsByTagName（'p'）[0]；
app.add0.addEventListener（'click'，function（）{
app.addLetterWrappedWord（）；
});
.row{
外形：1px固体石灰；
显示：表格；
宽度：600px；
填充：0.5雷姆；
}
上校{
填充：0.5雷姆；
显示：表格单元格；
宽度：100%；
轮廓：1px点青色；
宽度：200px；
}
p{
轮廓：1px点品红；
填充：0.3rem；
宽度：200px；
最大宽度：200px；
}
添加字母包装的单词



您使用
分隔每个文本跨距，这是一个非中断空间，可防止自动换行；相反，只需在跨距之间添加一个普通间距：


app={}；
app.addletwrappedword=函数（）{
var word=document.createElement（'span'）；
var字母；
字母=document.createElement（'span'）；
letter.innerText='t'；
单词。子单词（字母）；
字母=document.createElement（'span'）；
letter.innerText='e'；
单词。子单词（字母）；
字母=document.createElement（'span'）；
letter.innerText='s'；
单词。子单词（字母）；
字母=document.createElement（'span'）；
letter.innerText='t'；
单词。子单词（字母）；
app.p0.appendChild（word）；
var space=document.createElement（'span'）；
space.innerHTML=''；//此处为普通空间
app.p0.appendChild（空格）；
}
app.add0=document.getElementById（'add0'）；
app.p0=document.getElementsByTagName（'p'）[0]；
app.add0.addEventListener（'click'，function（）{
app.addLetterWrappedWord（）；
});
.row{
外形：1px固体石灰；
显示：表格；
宽度：600px；
填充：0.5雷姆；
}
p{
轮廓：1px点品红；
}
上校{
填充：0.5雷姆；
显示：表格单元格；
宽度：100%；
轮廓：1px点青色；
宽度：200px；
}
p{
填充：0.3rem；
宽度：200px；
最大宽度：200px；
}
添加字母包装的单词



您使用
分隔每个文本跨距，这是一个非中断空间，可防止自动换行；相反，只需在跨距之间添加一个普通间距：


app={}；
app.addletwrappedword=函数（）{
var word=document.createElement（'span'）；
var字母；
字母=document.createElement（'span'）；
letter.innerText='t'；
单词。子单词（字母）；
字母=document.createElement（'span'）；
letter.innerText='e'；
单词。子单词（字母）；
字母=document.createElement（'span'）；
letter.innerText='s'；
单词。子单词（字母）；
字母=document.createElement（'span'）；
letter.innerText='t'；
单词。子单词（字母）；
app.p0.appendChild（word）；
var space=document.createElement（'span'）；
space.innerHTML=''；//此处为普通空间
app.p0.appendChild（空格）；
}
app.add0=document.getElementById（'add0'）；
app.p0=document.getElementsByTagName（'p'）[0]；
app.add0.addEventListener（'click'，function（）{
app.addLetterWrappedWord（）；
});
.row{
外形：1px固体石灰；
显示：表格；
宽度：600px；
填充：0.5雷姆；
}
p{
轮廓：1px点品红；
}
上校{
填充：0.5雷姆；
显示：表格单元格；
宽度：100%；
轮廓：1px点青色；
宽度：200px；
}
p{
填充：0.3rem；
宽度：200px；
最大宽度：200px；
}
添加字母包装的单词



给
p>span
元素一个
显示：内联块
。像这样：


app={}；
app.addletwrappedword=函数（）{
var word=document.createElement（'span'）；
var字母；
字母=document.createElement（'span'）；
letter.innerText='t'；
单词。子单词（字母）；
字母=document.createElement（'span'）；
letter.innerText='e'；
单词。子单词（字母）；
字母=document.createElement（'span'）；
letter.innerText='s'；
单词。子单词（字母）；
字母=document.createElement（'span'）；
letter.innerText='t'；
单词。子单词（字母）；
app.p0.appendChild（word）；
var space=document.createElement（'span'）；
space.innerHTML=''；
app.p0.appendChild（空格）；
}
app.add0=document.getElementById（'add0'）；
app.p0=document.getElementsByTagName（'p'）[0]；
app.add0.addEventListener（'click'，function（）{
app.addLetterWrappedWord（）；
});
.row{
外形：1px固体石灰；
显示：表格；
wi