Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

305
Views
Why does `word-wrap / overflow-wrap: break-word` break right at this point?

Both for word-wrap: break-word; and overflow-wrap: break-word; CSS properties i have a premature breaking problem at the very end like in this case. Besides, with longer strings I even witnessed this problem manifest itself in different forms like not breaking at all at the expected end of the line or self inventing a wider or narrower width for the remaining of the lines.

The question is, when you have a very long string why does overflow-wrap: break-word; "break" at certain unexpected places..?

var str = Array.from({length:65366}, _ => ~~(Math.random()*9) + 1)
               .reduce((s,c) => s + c, ""),
    blk = document.getElementById("block");

blk.textContent = str;
#block{
    margin : 0 auto;
    font-family: monospace;
    width: 90vw;
    overflow-wrap: break-word;
}
<p id="block"></p>

Note: This problem doesn't seem to exist in Firefox but in Chrome and Edge i can see it. Also while scrolling down you may notice that the right margin changes.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!