contenteditableがtrueからfalseに設定されている場合、どのCSSプロパティが変更されますか？

Question

divのテーブルのcontenteditable属性がデフォルトでfalseに設定されているアプリケーションがあります。ユーザーはcontenteditable属性をtrueに変更したdivをクリックしてテキストを追加し、属性をfalseに戻す「保存」ボタンをクリックすることができます。

空白や改行を使用せずにdivの最大幅を超えてテキストを追加するときに発生する問題があります。 contenteditableがtrueある場合は例えば、

は「Areallylongnamethatsurpassesthewidthofthediv」

このテキストは、まさに私が保存したい動作です最大幅、時の自動改行を開始します。私たちの例を使用して：

「Areallylongname にthatsurpassesthe widthofthedivを」

contenteditableは、ユーザーが「保存」ボタンをクリックしたときに何が起こるかであるfalse、ある場合には、このテキストは、改行を削除していると名前が外に溢れ出ますdivの境界線（単語を複数に分割するのではなく、1つの行に置きます）。私たちの例に続いて、テキストがこれに上から変更されます：

性質が非contenteditableのこの動作を引き起こしている何のcss「Areallylongnamethatsurpassesthewidthofthediv」（これは私が欲しいもの、div要素の境界を超えていないオーバーフローする）

をdivs？

contenteditableがfalseに設定されている場合、自動改行を保存する方法はありますか？ Overflow: scrollまたはhiddenは私のアプリケーションに最適な解決策ではありません。ここで

は、問題を説明するスニペットです：word-wrap: break-wordは何が必要であるように

$('div').attr("contenteditable", false); 
 

 
$('div').on('click', function(e) { 
 
     $(this).attr("contenteditable", true); 
 
     $(this).focus(); 
 
     $(this).text(""); 
 
}); 
 
    
 
function saveAppt() { 
 
    $('div').attr("contenteditable", false); 
 
    $('div').prop("readonly", true); 
 
} 
 
    
 

div { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 10px; 
 
    max-width: 120px; 
 
    max-height: 120px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    display: table-cell; 
 
    outline: none; 
 
    white-space: pre-wrap; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>Click the div then start typing something</p> 
 

 
<div contenteditable="true" class="appt-text">If you start typing normally the line breaks enter on their own and it is awesome! This is what I want after we press "save" even if there are no spaces entered!</div> 
 

 
<br /> 
 

 
<div contenteditable="true" class="appt-text">WhenYouTypeAReallyLongNameItWillNotHaveLineBreaksAndSurpassTheBorderOfTheDiv</div> 
 

 
<br /> 
 

 
<button onclick="saveAppt()">save</button>

Answer 1

が見えます。下にそれをチェックしてください。

編集可能なコンテンツにbreak-wordを適用する既定のスタイルシートのa snapshotです。

$('div').attr("contenteditable", false); 
 

 
$('div').on('click', function(e) { 
 
     $(this).attr("contenteditable", true); 
 
     $(this).focus(); 
 
     $(this).text(""); 
 
}); 
 
    
 
function saveAppt() { 
 
    $('div').attr("contenteditable", false); 
 
    $('div').prop("readonly", true); 
 
}

div { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 10px; 
 
    max-width: 120px; 
 
    max-height: 120px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    display: table-cell; 
 
    outline: none; 
 
    white-space: pre-wrap; 
 
    border: 1px solid black; 
 
    
 
    /* additional style */ 
 
    word-wrap: break-word; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>Click the div then start typing something</p> 
 

 
<div contenteditable="true" class="appt-text">If you start typing normally the line breaks enter on their own and it is awesome! This is what I want after we press "save" even if there are no spaces entered!</div> 
 

 
<br /> 
 

 
<div contenteditable="true" class="appt-text">WhenYouTypeAReallyLongNameItWillNotHaveLineBreaksAndSurpassTheBorderOfTheDiv</div> 
 

 
<br /> 
 

 
<button onclick="saveAppt()">save</button>