ディビジョンがエキスパンドするのを防ぐ - 入力として使用する

Question

divを入力ボックスとして使用しています。 Chromeで

それは私がそれをしたいと思いちょうどのような役割を果たし：あなたは、次の問題が発生した幅より長い文字をボックスに入力すると

<div class="div_input" contentEditable="true" onkeyup="DoThing()" id="an_id_value">455</div> 

この

はCSS

.div_input { 
    background-color: white; 
    outline:1px solid darkgray; 
    font: -moz-field; 
    font: -webkit-small-control; 
    margin-top: 5px; 
    padding: 2px 3px; 
    width: 100px; 
} 

です展開しますが、視覚的なテキストを保持します。 Firefox Quantumでは、他の要素を右側にオーバーランさせます。

どうすればこの現象を防ぐことができますか？私は固定幅の修正でそれをラップしようとしましたが、それは何も変化しません。

Answer 1

word-break: break-all;を使用すると、限界に達するとすべての単語が壊れます。このような何か：ここ

.div_input { 
 
    background-color: white; 
 
    outline:1px solid darkgray; 
 
    font: -moz-field; 
 
    font: -webkit-small-control; 
 
    margin-top: 5px; 
 
    padding: 2px 3px; 
 
    width: 100px; 
 
    word-break: break-all; 
 
}

<div class="div_input" contentEditable="true" onkeyup="DoThing()" id="an_id_value">455</div>

あなたはJSFiddleでそれを持っている：スニペットを指摘しVXpからhttps://jsfiddle.net/c61askwy/1/

おかげで解笑