动态创建的元素宽度溢出

Question

我给动态创建的元素一个宽度，但它溢出。 此外，如果我给overflow:hidden;，它不会显示我在那里写的或复制的所有文本。

在我的代码中尝试max-width。

JSFIDDLE

基本上;如何才能获得具有特定px的文本而不重叠？

这是它的样子;

HTML

<input type="text" id="text" />
<input type="submit" id="add" value="add" />
<div id="list"></div>

一些JS（我追加时使用了h1元素）

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

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

CSS

#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;
}

Answer 1

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

  

word-break属性根据父div中可用的空间来破解单词天气中是否有空格

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

选中此示例：https://jsfiddle.net/gc8wto1j/12/

Answer 2

你可以尝试这个

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