动态创建的元素宽度溢出

Question

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

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

基本上；如何在不重叠的情况下获取具有特定像素的文本？

这是它的样子；

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

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

word-break property breaks the word according to the space available in parent div weather there is space in word or not

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

动态创建的元素宽度溢出

Dynamically created element width overflows

css

dynamic

overflow