動的に作成された要素の幅がオーバーフローする

Question

動的に作成された要素に幅を与えていますが、オーバーフローしています。 もし私がoverflow:hidden;を与えても、そこに書いたりコピーしたすべてのテキストは表示されません。

試しましたmax-width私のコードです。基本的には

JSFIDDLE

。どのように私は重複することなく、特定のpxのテキストを得ることができますか？

ここにどのように見えるか。何のスペースbetweは存在しません場合は

HTML

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

SOME JSは

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

（私は追加H1要素を使用しました）あなたが入力している単語は明らかにそれがこのような状況のための1つのライン、オーバーフローに来る途中、あなたはスペースがであり、親のdiv天候で利用可能なスペースに応じてword-break:break-all

word-breakプロパティは言葉を破るCSSプロパティを使用することができます単語やない

#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

あなたは1

01これを試すことができます

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