jquery append（）和容器大小

我试图使用Jquery

.append（）

方法将字符串附加到div中，但是附加的文本不适合框的大小

我附上了一把小提琴，展示了这个例子：

var person={firstName:“John”，lastName:“Doe”，年龄：50岁，眼睛颜色：“blue”}；
var tempS=“”；
Object.key（person）.forEach（function（key）{
console.log（key，person[key]）；
临时工+=钥匙+'和'+个人[钥匙]；
$（'.box'）.append（key+'和'+person[key]+'
'）；
});
$（'.box2'）.append（tempS）；

您可以为

.box2

元素使用CSS'

分词

属性：

word-break: break-all;

顺便说一句，在HTML中，请注意

&

应编码为

&，因为它是HTML字符实体的第一个字符

参考：



如果您想要换行的可能性，则每个元素后面都需要空格：

tempS += key+'&'+person[key] + " ";

示例：
您基本上是尝试在没有空格的情况下包装文本。我已经测试了这个解决方案，它似乎是有效的

将此类添加到css：

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

.wordwrap{
空白：预换行；/*CSS3*/
空白：-moz预包装；/*Firefox*/
空白：-pre-wrap；/*Opera您正在比较苹果和橙子。在您的示例中，工作字符串中有空格，而代码生成的字符串中没有空格。
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}