Dynamisch erstellt Element Breite Überläufe

Question

Ich gebe dynamisch erstellten Element eine Breite, aber es überläuft. Auch wenn ich overflow:hidden; gebe, zeigt es nicht den ganzen Text an, den ich dort schrieb oder kopierte.

Versucht max-width in meinem Code.

JSFIDDLE

Grundsätzlich; Wie kann ich Text mit einem bestimmten px ohne Überlappung erhalten?

Hier, wie es aussieht;

HTML

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

EINIGE JS (verwendet h1-Element, wenn ich anfügen)

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

Wenn es keinen Raum betwe sein en das Wort, um es für diese Situation in einer Linie und Überlauf kommt offensichtlich treten Sie dann können Sie eine CSS-Eigenschaft word-break:break-all

word-break Eigenschaft bricht das Wort dort Eltern div Wetter zur Verfügung Raum nach Verwendung ist Raum in Wort oder nicht

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

prüfen dieses Beispiel: https://jsfiddle.net/gc8wto1j/12/

Answer 2

können Sie versuchen, diese ein

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