Html2canvas: word-wrap:break-word가 작동하지 않습니다.

정말로 word -wrap:break-work를 사용하고 있습니까? 예를 들어 앵무새를 앵무새로 바꾸거나 숭배를 나쁜 엉덩이로 바꾸는 것은 정말 나쁩니다. 나는 아직 그것을 사용할 수 있는 용도를 찾지 못했지만 css에서 max-font 또는 강제로 크기를 줄이는 것과 같은 것이 없을 때 유혹적입니다.

알고 있지만 이 기능은 내 서비스에 매우 필요합니다.

사용자의 관점은
아아
아아
아아
하지만 캡쳐한 사진은
아아아아아아아아아

사용자에게는 매우 모호합니다.

문제가 있습니다. 우리는 단어가 사용 가능한 너비보다 길고 자동으로 끊어져야 할 때 break-word를 사용하는 html/텍스트 편집기를 사용하고 있습니다. letterRendering이 활성화된 html2canvas를 사용한 후 표시되는 렌더링이 일치하지 않습니다. 종종 텍스트 줄은 줄 바꿈 없이 해야 하는 것보다 한 줄 아래로 렌더링됩니다.

우리도 같은 문제에 직면해 있습니다.

@savokiss 옵션이 지정된 경우 자동 교체를 수행하는 pull 요청을 생성할 수 있습니까?

잘못된 문제에 답했을 수도 있습니다. 여기 내 솔루션 #83이 있습니다.
@hanc1208 내 솔루션은 위의 문제에 대한 것이며 이 리포지토리의 소스 코드를 편집할 필요가 없습니다.

같은 질문이 있습니다

이 문제에 대한 소식이 있습니까? 테스트를 위해 최신 버전의 html2canvas.js 파일을 사용했는데 여전히 같은 문제가 있습니다.(

이 문제를 실제로 테스트하고 싶었고 실제로 공식 페이지의 테스트 콘솔에서도 재현되는 것 같습니다. http://mariusbike83.wix.com/test1에 있는 매우 간단한 웹페이지를 만들었습니다. 이 페이지에는 매우 긴 문자열(분리할 공백 없이)이 있는 일부 필드와 텍스트 영역만 있습니다. 이것을 html2canvas 라이브러리로 렌더링하면 문자열이 한 줄로 된 것을 알 수 있습니다.

누구든지이 문제에 대한 해결책을 찾았습니까?

(Btw, 공식 테스트 콘솔은 https://html2canvas.hertzen.com/screenshots.html에 있으며 "자바스크립트 비활성화" 확인란의 선택을 취소해야 합니다.)

내 응용 프로그램의 경우 0.5.0-alpha1에서 v0.4.1로 다운그레이드했으며 작동하는 것 같았으므로 해당 버전을 사용하겠습니다. 나는 철저히 테스트하지는 않았지만 확실히 긴 문자열이 적절하게 래핑되었습니다. 이 방법으로 문제가 해결되는지 확인하십시오. 버전의 큰 차이로 인해 프로세스에서 다른 버그가 도입될 수 있지만.

jquery로 span 태그로 각 문자를 수동으로 끊는 것은 어떻습니까?

나를 위해 true로 설정된 letterRendering ....
html2canvas 옵션 문서: https://html2canvas.hertzen.com/documentation.html

v0.4.1 ...를 사용하지 않고 이 문제를 해결할 수 있는 방법은 없나요?

@SatoshiKawabata 님, @wayrex가 제안한 letterRendering: true 옵션을 사용해 보셨습니까?

@eKoopmans 시도했지만 작동하지 않았습니다.

@eKoopmans @SatoshiKawabata 베타 테에서 letterRendering도 작동하지 않는다는 것을 확인할 수 있습니다. 이전 0.4.1 버전에서는 작동하지만 베타에서는 작동하지 않는 것 같습니다.

@gelinger777 이것을 npm 로 사용하고 싶어서 #1143호를 추가했습니다. 나는 기다려야 한다.

나는 그것을 해결했다.

변화

var textList = (!this.options.letterRendering || noLetterSpacing(container)) && !hasUnicode(container.node.data) ? getWords(characters) : characters.map(function(character) {
   return punycode.ucs2.encode([character]);
});

에게

var textList = characters.map(function(character) {
  return punycode.ucs2.encode([character]);
});

@love-everyday 홍보해야지

@CodyMoore240 이미 1.0.0-alpha.1 에서 해결되었습니다.

포크하겠습니다 감사합니다.

단어 need break 앞에 <i></i> 를 추가하여 수정했는데 다음과 같습니다.

<p class="punch-card-info-word">
         <i></i>statutestatutestatutestatutestatutestatutestatutestatutestatutestatutestatutestatute
</p>

이 문제는 5년 전에 시작되었으며 현재 다음과 같이 계산되고 있습니다.
이 성가신 버그를 우회하는 방법을 찾은 세상과 공유하고 싶습니다.
텍스트 영역 입력에서 텍스트를 가져왔습니다.

var txt = modal_dialog_text_area_input.value;
그런 다음 공백을 보존하기 위해 각 공백을 다음 마크업으로 대체했습니다. 어떤 html2canvas가 실패하는지, 그리고 우리가 침대 대신 여기에서 새벽 3시에 자신을 찾는 이유는 다음과 같습니다.

paragraphElement.innerHTML = txt.replace(/\s/g, '<span> </span>');

이제 단락이 보기 좋고 html2canvas가 찍은 스크린샷이 정상입니다.

또 다른 사항: 단락 요소에는 다음 CSS 규칙이 있어야 합니다.

    word-break: break-word;
    white-space: normal;

몸조심하세요