Css 动态创建的元素宽度溢出

我给动态创建的元素一个宽度，但它溢出了。 如果我给出

溢出：隐藏，它不会显示我在那里写或复制的所有文本

在我的代码中尝试了
最大宽度


基本上；如何使用特定的px获取文本而不重叠

这里是它的样子


HTML

如果您输入的单词之间没有空格，那么很明显它将出现在一行中并溢出。在这种情况下，您可以使用css属性
word break:break all

分词
属性根据父div中的可用空间来分词word中是否有空格

检查此示例：
您可以尝试此示例

#list h1 {
    border: 1px solid #333;
    max-width: 300px;
    min-width: 300px;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    word-break: keep-all;
}

$("#add").click(function() {
var val=$("#text").val();
$("#text").val('');
var item ="<h1>"+val+'<p class="del">x</p>'+"</h1>";

$("#list").append(item);
});

#list {
  border:1px solid #333;
  width:300px;
}
#list h1 {
  position:relative;
  border:1px solid #333;
  max-width:300px;
  min-width:300px;
}
#list p {
  color:red;
  position:absolute;
  right:0;
  top:-35px;
}

#list h1 {
  position:relative;
  border:1px solid #333;
  max-width:300px;
  min-width:300px;
  word-break:break-all;
}

#list h1 {
    border: 1px solid #333;
    max-width: 300px;
    min-width: 300px;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    word-break: keep-all;
}