css - Dynamically created element width overflows -

i giving dynamically created element width overflows. if give overflow:hidden;, not show text wrote or copied there.

tried max-width in code.

jsfiddle

basically; how can text specific px without overlapping ?

here how looks like;

html

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

some js (used h1 element when append)

$("#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; } 

if there no space between word entering come in 1 line , overflow situation can use css property word-break:break-all

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

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

check example : https://jsfiddle.net/gc8wto1j/12/