which css properties change when a contenteditable is set from true to false?

Question

I have an application where a table of divs have their contenteditable attribute set to false by default. The user can click the div, which changes its contenteditable attribute to true, they can then add text, then click the "save" button which changes the attribute back to false.

There is an issue that occurs when the user adds text beyond the set max-width of the div without using whitespace or line breaks. For example,

"Areallylongnamethatsurpassesthewidthofthediv"

When contenteditable is true this text will start an automatic linebreak at the max width, which is exactly the behaviour I want to preserve. Using our example:

"Areallylongname thatsurpassesthe widthofthediv"

When contenteditable is false, which is what happens when the user clicks the "save" button, this text has its line breaks removed and the name overflows outside the borders of the div (it places the word on one line instead of splitting it up into several). Following our example, text will change from above to this:

"Areallylongnamethatsurpassesthewidthofthediv" (this will overflow past the borders of the div, not what I want)

What css properties are causing this behaviour of non-contenteditable divs?

Is there a way I can preserve the automatic line breaks when contenteditable is set to false? Overflow: scroll or hidden is not the best solution for my application.

Here is a snippet illustrating the problem:

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

Looks like word-wrap: break-word is what you need; check it out below.

Here's a snapshot of the default stylesheet where it's applying break-word to editable content.

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