결과에 연결된 공백이 표시되지 않습니다.

Question

원하는 패딩이 제대로 연결되지 않았습니다. 즉, 공백이 나타나지 않습니다. 왜 보이지 않는지 확실하지 않고 몇 시간 동안 해결책을 제시하지 않고 코드를 수정했습니다.

var padWord = function(word){ 
    if(endsInPunctuation(word)){ 
     trueLength = (word.length)-1; 
    }else{ 
     trueLength = word.length; 
    } 
    switch(trueLength){ 
     case 1: 
      word = " " + word.fontcolor("red"); 
      break; 
     case 2: 
      word = " " + word.replaceAt(1, word.charAt(1), "red"); 
      break; 
     case 3: 
      word = " " + word.replaceAt(1, word.charAt(1), "red"); 
      break; 

Answer 1

브라우저는 기본적으로 둘 이상의 공백 문자를 접습니다. 줄 바꿈하지 않는 공백 사용   또는 css white-space:pre; 또는 html 태그 <pre>

Answer 2

문자열 연결에 문제가 없습니다. 공백 은 문자열에 추가됩니다. 문제는 어떻게 결과를 표시하는지에 있습니다. 대부분의 경우 내용 주위의 공백은 HTML 요소에서 축소됩니다. 이 문제를 해결할 수있는 몇 가지 방법이 있습니다.

1. 사용 CSS는 CSS에이 라인을 추가하여 HTML 요소의 기본 동작을 오버라이드 (override) :

   #screen{ 
       ... 
       white-space: pre; 
   } 
   

2. 가 표시됩니다 엔티티를 HTML로 공간을 변환합니다. ,

   textShow.innerHTML = word.replace(/\s+/, function(s) { 
       return s.replace(/\s/g, ' '); 
   });