cfcomputing/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Content Editable break-word issues</title>

  <style type="text/css">
    .outer-wrapper {
      width: 480px;
    }

    .wrapper {
      /*
        Cannot remove these styles they come from 3rd party library and are important for wrapping when editing content
        https://github.com/quilljs/quill/blob/4c659aa407d56bb2548045b2dbcb828f18d35453/assets/core.styl#L51-L52
      */
      white-space: pre-wrap;
      word-wrap: break-word;
      font-size: 15px;
      line-height: 27px;
    }

    .editablecontent {
      overflow: hidden;
      position: relative;
      width: 100%;
      padding: 35px;
      border: 2px solid black;
    }
  </style>
</head>

<body>
  <h1>Inconsistent line wrapping/breaking between contenteditable="true" and contenteditable="false" Editing experience doesn't match with viewing experience</h1>
  <h2>contenteditable="false" (see space starting line 2)</h2>
  <div class="outer-wrapper">
    <div class="wrapper">
      <div class="editablecontent" contenteditable="false"><p><span>1Content 2Content 3Content 4Content 5Content 6Content 7Content <span>8Contents</span> 9Content 10Content</span></p></div>
    </div>
  </div>

  <h2>contenteditable="true" (notice no space starting line 2 Chrome adds in a line-break: after-white-space;)</h2>
  <div class="outer-wrapper">
    <div class="wrapper">
      <div class="editablecontent" contenteditable="true"><p><span>1Content 2Content 3Content 4Content 5Content 6Content 7Content <span>8Contents</span> 9Content 10Content</span></p></div>
    </div>
  </div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<title>Content Editable break-word issues</title>

	<style type="text/css">
	.outer-wrapper {
	width: 480px;
	}

	.wrapper {
	/*
	Cannot remove these styles they come from 3rd party library and are important for wrapping when editing content
	https://github.com/quilljs/quill/blob/4c659aa407d56bb2548045b2dbcb828f18d35453/assets/core.styl#L51-L52
	*/
	white-space: pre-wrap;
	word-wrap: break-word;
	font-size: 15px;
	line-height: 27px;
	}

	.editablecontent {
	overflow: hidden;
	position: relative;
	width: 100%;
	padding: 35px;
	border: 2px solid black;
	}
	</style>
	</head>

	<body>
	<h1>Inconsistent line wrapping/breaking between contenteditable="true" and contenteditable="false" Editing experience doesn't match with viewing experience</h1>
	<h2>contenteditable="false" (see space starting line 2)</h2>
	<div class="outer-wrapper">
	<div class="wrapper">
	<div class="editablecontent" contenteditable="false"><p><span>1Content 2Content 3Content 4Content 5Content 6Content 7Content <span>8Contents</span> 9Content 10Content</span></p></div>
	</div>
	</div>

	<h2>contenteditable="true" (notice no space starting line 2 Chrome adds in a line-break: after-white-space;)</h2>
	<div class="outer-wrapper">
	<div class="wrapper">
	<div class="editablecontent" contenteditable="true"><p><span>1Content 2Content 3Content 4Content 5Content 6Content 7Content <span>8Contents</span> 9Content 10Content</span></p></div>
	</div>
	</div>
	</body>

	</html>