当contenteditable从true变为false时，哪些css属性会改变？

Question

我有一个应用程序，其div表的默认设置为contenteditable属性设置为false。用户可以单击div，将其contenteditable属性更改为true，然后可以添加文本，然后单击“保存”按钮，将该属性更改为false。

当用户在不使用空格或换行符的情况下添加超出div的设置最大宽度的文本时，会出现问题。例如，

“Areallylongnamethatsurpassesthewidthofthediv”

当contenteditable是true本文将开始在最大宽度，这也正是我想保留的行为自动断行。使用我们的例子：

“Areallylongname thatsurpassesthe widthofthediv”

当contenteditable为false，也就是当用户点击“保存”按钮，会发生什么情况，本文有换行符删除，名称溢出外div的边界（它将单词放在一行上，而不是将它分成几个）。在我们的例子，文本将改变从上面这个：

“Areallylongnamethatsurpassesthewidthofthediv”（这将溢出过去股利，不是我想要的边框）

什么CSS属性造成的非contenteditable这种行为DIVS？

当contenteditable设置为false时，我可以保留自动换行符吗？ Overflow: scroll或hidden不是我的应用程序的最佳解决方案。

下面是一个片段说明问题：

$('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

看起来word-wrap: break-word是你所需要的;看看下面。

这是a snapshot的默认样式表，它将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; 
 
    
 
    /* 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>