Html2canvas: التفاف الكلمات: كسر الكلمة لا يعمل

هل تستخدم حقًا التفاف الكلمات: كسر العمل؟ هذا أمر سيء حقًا عندما يتحول الببغاء إلى عفن أو عبادة إلى ورك ورد على سبيل المثال. لم أجد بعد استخدامًا قابلاً للاستخدام له ، لكن من المغري عدم وجود شيء مثل max-font أو فرض الحجم في css.

أعلم لكن هذه الوظيفة ضرورية جدًا لخدمتي.

وجهة نظر المستخدم
أأ
أأ
أأ
لكن الصورة الملتقطة
aaaaaaaaaaaaaaaaaaa

إنه غامض للغاية بالنسبة للمستخدمين.

نحن نواجه هذه المشكلة. نحن نستخدم محرر نصوص / html يستخدم كلمة فاصلة عندما تكون الكلمة أطول من العرض المتاح ويجب كسرها تلقائيًا. لا يتطابق العرض الذي نراه بعد استخدام html2canvas مع تمكين letterRendering. في كثير من الأحيان ، يتم تحويل سطر النص إلى سطر واحد لأسفل أكثر مما ينبغي دون أي التفاف على الإطلاق.

نحن أيضا نواجه نفس المشكلة.

savokiss هل يمكنك إنشاء طلب سحب يقوم بالاستبدال التلقائي إذا تم تحديد الخيار؟

ربما أجبت على المشكلة الخاطئة ، إليكم الحل رقم 83
@ hanc1208 الحل الخاص بي هو للمشكلة أعلاه ولا يحتاج إلى تعديل الكود المصدري لهذا الريبو.

لدي نفس السؤال

أي أخبار عن هذا الموضوع؟ لقد استخدمت ، للاختبار ، أحدث إصدار من ملف html2canvas.js وما زلت أعاني من نفس المشكلة :(

كنت أرغب في اختبار هذه المشكلة حقًا ويبدو أنها تتكرر حتى مع وحدة الاختبار على الصفحة الرسمية. لقد أنشأت صفحة ويب بسيطة للغاية ، وتقع على http://mariusbike83.wix.com/test1. تحتوي هذه الصفحة فقط على بعض الحقول ومنطقة نص بها سلسلة طويلة جدًا (بدون مسافات لتقسيمها). عندما يتم تقديم هذا باستخدام مكتبة html2canvas ، ستلاحظ أن السلسلة ذات سطر واحد.

هل وجد أي شخص حلا لهذه المشكلة؟

(راجع للشغل ، وحدة الاختبار الرسمية موجودة على https://html2canvas.hertzen.com/screenshots.html وتأكد من إلغاء تحديد مربع الاختيار "Disable javascript")

بالنسبة إلى طلبي ، قمت بإرجاع إصدار 0.5.0-alpha1 إلى v0.4.1 ويبدو أنه يعمل ، لذلك سأستخدم هذا الإصدار. لم أختبر جيدًا ، ولكن بالتأكيد سلاسل طويلة من الأحرف ملفوفة بشكل صحيح. جرب هذا لمعرفة ما إذا كان يحل المشكلة ؛ على الرغم من أنه قد يتم إدخال أخطاء أخرى في العملية بسبب الاختلافات الكبيرة في الإصدارات.

ماذا عن فصل كل حرف يدويًا باستخدام علامة الامتداد بواسطة jquery؟

تم تعيين letterRendering إلى true يعمل بالنسبة لي ....
مستندات خيارات html2canvas: https://html2canvas.hertzen.com/documentation.html

ألا توجد طريقة لحل هذه المشكلة بدون استخدام v0.4.1 ...؟

مرحبًا SatoshiKawabata ، هل حاولت استخدام الخيار letterRendering: true الذي اقترحهwayrex؟

eKoopmans حاولت ذلك لكنها لم تنجح أيضًا.

eKoopmansSatoshiKawabata يمكنني أن أؤكد أنه في الإصدار التجريبي من 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]);
});

@ الحب - كل يوم يجب أن تجعل العلاقات العامة

@ 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:00 صباحًا هنا ، بدلاً من الفراش:

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

تبدو الفقرة الآن جيدة ولقطة الشاشة التي يأخذها html2canvas على ما يرام.

شيء آخر: يجب أن يحتوي عنصر الفقرة على قواعد css التالية:

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

اعتنوا بكم جميعًا