Html2canvas: word-wrap:break-word tidak berfungsi

Apakah Anda benar-benar menggunakan Word- wrap:break-work? Itu sangat buruk ketika mengubah burung beo menjadi burung beo atau pemujaan menjadi wors hip misalnya. Saya belum menemukan kegunaan yang dapat digunakan untuk itu tetapi sangat menggoda ketika tidak ada yang namanya max-font atau memaksa turun ke ukuran di css.

Saya tahu tetapi fungsi ini sangat diperlukan untuk layanan saya.

Pandangan pengguna adalah
aaa
aaa
aaa
Tapi gambar yang diambil adalah
aaaaaaaaaaaaaaa

Ini sangat ambigu bagi pengguna.

Kami mengalami masalah ini. Kami menggunakan editor html/teks yang menggunakan break-word ketika sebuah kata lebih panjang dari lebar yang tersedia dan harus dipecah secara otomatis. Render yang kita lihat setelah menggunakan html2canvas dengan letterRendering diaktifkan tidak cocok. Sering kali, baris teks dirender satu baris lebih jauh dari yang seharusnya tanpa pembungkus sama sekali.

kita juga menghadapi masalah yang sama.

@savokiss dapatkah Anda membuat permintaan tarik yang melakukan penggantian otomatis jika opsi ditentukan?

Saya mungkin menjawab masalah yang salah, inilah solusi saya # 83
@ hanc1208 Solusi saya adalah untuk masalah di atas dan tidak perlu mengedit kode sumber repo ini.

Saya punya pertanyaan yang sama

Ada berita tentang masalah ini? Saya menggunakan, untuk pengujian, versi terbaru dari file html2canvas.js dan saya masih memiliki masalah yang sama :(

Saya ingin benar-benar menguji masalah ini dan memang tampaknya direproduksi bahkan dengan konsol uji di halaman resmi. Saya membuat halaman web yang sangat sederhana, terletak di http://mariusbike83.wix.com/test1. Halaman ini hanya berisi beberapa bidang dan area teks dengan string yang sangat panjang (tanpa spasi untuk memecahnya). Saat ini dirender dengan pustaka html2canvas, Anda akan melihat bahwa string itu satu baris.

Adakah yang menemukan solusi untuk masalah ini?

(Btw, konsol pengujian resmi terletak di https://html2canvas.hertzen.com/screenshots.html dan pastikan untuk menghapus centang pada kotak centang "Nonaktifkan javascript")

Untuk aplikasi saya, saya menurunkan versi dari 0.5.0-alpha1 ke v0.4.1 dan sepertinya berhasil, jadi saya hanya akan menggunakan versi itu. Saya belum menguji secara menyeluruh, tetapi yang pasti string karakter yang panjang dibungkus dengan benar. Coba ini untuk melihat apakah itu menyelesaikan masalah; meskipun bug lain mungkin diperkenalkan dalam proses karena perbedaan besar dalam versi.

bagaimana kalau secara manual memecah setiap karakter dengan tag span oleh jquery?

letterRendering diatur ke true bekerja untuk saya....
html2canvas options docs: https://html2canvas.hertzen.com/documentation.html

Apakah tidak ada cara untuk menyelesaikan masalah ini tanpa menggunakan v0.4.1 ...?

Hai @SatoshiKawabata , apakah Anda mencoba menggunakan opsi letterRendering: true yang disarankan oleh @wayrex?

@eKoopmans Saya mencobanya tetapi tidak berhasil juga.

@eKoopmans @SatoshiKawabata Saya dapat mengonfirmasi bahwa pada beta te letterRendering juga tidak berfungsi. Tampaknya pada versi 0,4.1 yang lebih lama berfungsi tetapi pada beta tidak.

@gelinger777 Saya ingin menggunakan ini dengan npm jadi saya menambahkan masalah #1143. aku harus menunggu.

Saya telah memecahkannya.

mengubah

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

ke

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

@love-everyday kamu harus membuat PR

@CodyMoore240 Itu sudah diselesaikan di 1.0.0-alpha.1

Terima kasih saya akan garpu.

Saya memperbaikinya dengan menambahkan <i></i> sebelum kata perlu istirahat, dan sepertinya

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

Masalah ini dimulai 5 tahun yang lalu... dan terus bertambah:
Saya ingin berbagi dengan dunia bahwa saya telah menemukan cara untuk melewati bug yang mengganggu ini,
Saya mengambil teks dari input textarea :

var txt = modal_dialog_text_area_input.value;
kemudian saya mengganti setiap spasi putih dengan markup berikut, untuk mempertahankan spasi putih. html2canvas mana yang gagal dilakukan, dan mengapa kita mendapati diri kita pada pukul 3:00 pagi di sini, bukannya di tempat tidur:

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

Sekarang paragrafnya terlihat bagus dan tangkapan layar yang diambil html2canvas OK.

Hal lain: elemen paragraf harus memiliki aturan css berikut:

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

Hati-hati ya