contenteditable이 true에서 false로 설정되면 어떤 css 속성이 변경됩니까?

Question

div 테이블에 contenteditable 속성이 기본적으로 false로 설정된 응용 프로그램이 있습니다. 사용자는 contenteditable 속성을 true로 변경하는 div를 클릭 한 다음 텍스트를 추가 한 다음 속성을 다시 false로 변경하는 "저장"버튼을 클릭 할 수 있습니다.

사용자가 공백이나 줄 바꿈을 사용하지 않고 div의 최대 너비를 초과하여 텍스트를 추가 할 때 발생하는 문제가 있습니다. contenteditable이 true 경우 예를 들어,

"Areallylongnamethatsurpassesthewidthofthediv는"

이 텍스트는 내가 유지하려면 정확히 동작입니다 최대 폭에 자동 LINEBREAK을 시작합니다. 우리의 예를 사용 :

"Areallylongname 에게 thatsurpassesthe widthofthediv을"

contenteditable는 사용자가 "저장"버튼을 클릭 할 때 발생하는 것입니다 false 인 경우,이 텍스트는 줄 바꿈이 제거가 있고 이름이 외부 오버 플로우 div의 테두리 (단어를 여러 줄로 나누지 않고 한 줄에 표시). 우리의 예에 따라, 텍스트에서이에 이상이 변경됩니다 :

"Areallylongnamethatsurpassesthewidthofthediv"(사업부, 내가 원하지 않는 것의 경계 과거이 의지 오버 플로우) 특성이 비 contenteditable의이 동작을 일으키는 어떤 CSS

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 것 같은데된다 : 여기

은 조각은 문제를 설명한다 그것을 아래에 체크 아웃하십시오.

편집 가능한 콘텐츠에 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>