Html2canvas: word-wrap:break-word не работает

Вы действительно используете word -wrap:break-work? Это действительно плохо, когда он превращает попугая в попугая или, например, поклонение в богослужение. Мне еще предстоит найти для него полезное применение, но это заманчиво, когда нет такой вещи, как max-font или принудительное уменьшение размера в css.

Я знаю, но эта функция очень нужна для моей службы.

Представление пользователя такое
ааа
ааа
ааа
Но захваченное изображение
ааааааааааааааааааааааааа

Это очень неоднозначно для пользователей.

У нас есть эта проблема. Мы используем html/текстовый редактор, который использует разрыв слова, когда слово длиннее доступной ширины и должно быть автоматически разбито. Рендеринг, который мы видим после использования html2canvas с включенным letterRendering, не совпадает. Часто строка текста отображается на одну строку ниже, чем должна, вообще без переноса.

мы также сталкиваемся с той же проблемой.

@savokiss , можете ли вы создать запрос на включение, который выполняет автоматическую замену, если указан параметр?

Возможно, я ответил не на тот вопрос, вот мое решение № 83.
@ hanc1208 Мое решение относится к указанной выше проблеме, и ему не нужно редактировать исходный код этого репозитория.

у меня такой же вопрос

Есть новости по этому вопросу? Я использовал для тестирования последнюю версию файла html2canvas.js, и у меня все еще есть та же проблема :(

Я хотел действительно проверить эту проблему, и действительно, она, кажется, воспроизводится даже с тестовой консолью на официальной странице. Я создал очень простую веб-страницу, расположенную по адресу http://mariusbike83.wix.com/test1. Эта страница содержит только несколько полей и текстовую область с очень длинной строкой (без разделяющих пробелов). Когда это отображается с помощью библиотеки html2canvas, вы заметите, что строка однострочная.

Кто-нибудь нашел решение этой проблемы?

(Кстати, официальная тестовая консоль находится по адресу https://html2canvas.hertzen.com/screenshots.html и обязательно снимите флажок «Отключить javascript»)

Для своего приложения я понизил версию с 0.5.0-alpha1 до версии 0.4.1, и это, похоже, сработало, поэтому я просто буду использовать эту версию. Я не проверял тщательно, но наверняка длинные строки символов завернуты правильно. Попробуйте это, чтобы увидеть, решает ли это проблему; хотя в процессе могут появиться и другие ошибки из-за больших различий в версиях.

как насчет того, чтобы вручную разбить каждый символ с помощью тега span с помощью jquery?

letterRendering, установленный на true, у меня сработал....
Документы по параметрам html2canvas: https://html2canvas.hertzen.com/documentation.html

Нет ли способа решить эту проблему без использования v0.4.1 ...?

Привет, @SatoshiKawabata , ты пробовал использовать опцию letterRendering: true , предложенную @wayrex?

@eKoopmans Я пробовал это, но это тоже не сработало.

@eKoopmans @SatoshiKawabata Я могу подтвердить, что на бета-версии письма рендеринг тоже не работает. Кажется, на более старой версии 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.

Спасибо, я раскошелюсь.

Я исправил это, добавив <i></i> перед словом need break, и это выглядит так:

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

Эта проблема началась 5 лет назад... и продолжается:
Я хотел бы поделиться со всем миром тем, что нашел способ обойти эту надоедливую ошибку,
Я взял текст из ввода textarea:

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;

берегите себя