Short answer: word-break: break-word is not guaranteed to fail in html2canvas, but html2canvas rebuilds a page from the DOM and the CSS it implements rather than taking the browser’s native screenshot. A browser can wrap text correctly while the generated canvas does not. Check the computed styles and installed html2canvas version, prefer overflow-wrap: break-word for long URLs and tokens, and use an onclone override when the render-only copy needs different CSS.
Why the browser and html2canvas can disagree
html2canvas traverses the document, reads styles and layout information, and paints its own representation onto a canvas. It is not a pixel capture of the browser compositor. The project FAQ therefore warns that CSS support is incomplete: each CSS property must be implemented manually for it to render correctly. The feature list includes both word-break and overflow-wrap, so the title describes a reported symptom, not a universal rule.
The result can vary with the html2canvas release, the computed style on the actual text node, available width, white-space rules, font metrics, line height, and the particular string being rendered. A live page and a canvas made from the same element are two different rendering paths.
First, prove what is failing
- Use identical content and viewport. Do not compare a responsive browser view with a canvas captured at another width or device scale.
- Inspect the real text container. In DevTools, check computed
word-break,overflow-wrap,white-space, width, font family, font size and line height. A rule on a parent may be overridden by a more specific rule on a child. - Test an actually unbreakable string. A normal sentence may not expose the difference. Try a long URL, identifier or token with no spaces.
- Record the installed html2canvas version. Package-lock files, a CDN URL and a framework dependency can leave an older copy in production even when development uses a newer one.
- Compare output at the target environment. Fonts that have not loaded, a different viewport, or a hidden/zero-width ancestor can change line measurements before capture.
Choose the CSS rule that matches the desired wrapping
| Rule | Use it when | Behavior and trade-off |
|---|---|---|
overflow-wrap: break-word |
A normally unbreakable word or URL should break only when it would overflow. | Creates emergency break opportunities without making ordinary words break arbitrarily. Those opportunities are not counted for min-content sizing. |
overflow-wrap: anywhere |
You want emergency opportunities to participate in intrinsic sizing. | Like emergency wrapping, but introduced opportunities do count toward min-content calculations. |
word-break: break-all |
Breaking between almost any characters is acceptable, such as a narrow code or log column. | More aggressive and often less readable because words can split even when a less disruptive wrap exists. |
word-break: break-word |
Maintaining compatibility with existing code while you migrate. | MDN marks this value deprecated and documents it as behaving like overflow-wrap: anywhere with word-break: normal. It is not the preferred modern spelling. |
For most cards, reports and screenshots, start with:
#1 Best Overall
.capture-text {
overflow-wrap: break-word;
word-break: normal;
}
If the requirement is “never allow a long token to escape this box,” use overflow-wrap: anywhere or, when acceptable, word-break: break-all. Check the visual result: a technically valid wrap can still be poor typography.
A reliable html2canvas capture pattern
Wait for fonts and images before capture, give the target a definite width, and keep the wrapping rule on the element containing the text. The following example captures one element and applies a style only to html2canvas’s cloned document:
import html2canvas from 'html2canvas';
async function captureCard() {
await document.fonts?.ready;
const element = document.querySelector('#card');
if (!element) throw new Error('Missing #card');
const canvas = await html2canvas(element, {
backgroundColor: '#ffffff',
onclone(clonedDocument) {
clonedDocument.querySelectorAll('.capture-text').forEach((node) => {
node.style.overflowWrap = 'break-word';
node.style.wordBreak = 'normal';
node.style.whiteSpace = 'normal';
});
},
});
const link = document.createElement('a');
link.download = 'card.png';
link.href = canvas.toDataURL('image/png');
link.click();
}
The onclone callback changes the cloned document used for rendering, not the live page. That makes it suitable for a capture-only workaround. It is an implementation pattern, not a guarantee for every layout: verify the generated image in the browser, build, and html2canvas version you actually ship.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Version and dependency checks
The html2canvas changelog records a fix for overflow-wrap: break-word in version 1.2.0, dated 2021-08-04. That is a reason to investigate an old dependency, not proof that upgrading resolves every wrapping case. Confirm the version in the bundle that runs in production, update within your project’s compatibility policy, then repeat the same reproduction. An upgrade can also change other rendering details, so compare representative pages rather than only one test string.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Keep the fix targeted
- Scope the rule to the capture component instead of applying
break-allglobally. - Use a stable width and avoid changing layout while the capture is in progress.
- Load the intended webfont before calling html2canvas; fallback metrics can move a word to another line.
- Remove temporary diagnostic borders or clone-only styles from the final capture configuration.
Troubleshooting branches
The browser wraps, but the canvas keeps one long line
Inspect the cloned target with onclone, set overflowWrap explicitly, and ensure the element has a finite width. Check that a descendant is not using white-space: nowrap. If the string is still too wide, try overflow-wrap: anywhere or a less attractive but stronger word-break: break-all.
Nothing wraps, including ordinary words
Look for white-space: nowrap, an inline element whose available width is not constrained, or a flex/grid item with an unexpectedly large min-content size. Give the text box a width or min-width: 0 where appropriate, then recapture.
Rank #3
The fix works in development but not production
Verify the bundled html2canvas version, CSS order and font-loading timing. A production stylesheet may override the rule, or the capture may run before fonts finish loading. Log getComputedStyle(node).overflowWrap immediately before capture.
The canvas is blank or missing part of the page
Separate this from word wrapping. Check that the target is mounted and visible, that images are available, and that the capture is not racing a route change or animation. A wrapping rule cannot repair a failed load or an element with no usable dimensions.
Text differs only for certain scripts or punctuation
Line-breaking behavior depends on the characters and font. Test the exact production strings, including long URLs, hyphens, non-Latin text and emoji. Do not assume a result for one token generalizes to every language or font.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
When a browser-side canvas is the wrong tool
If you need a server-generated image or PDF, a stable viewport, request headers, cookie state, lazy-loaded images, or repeatable automation, a screenshot service avoids maintaining a browser runtime yourself. ScreenshotNeo is the first option to try: it produces clean shots, bills only clean captures, and has the lowest paid plan.
Or skip the browser setup
One GET request returns a PNG, JPEG, WebP or PDF. The API accepts a URL and can handle full-page capture, lazy images, a CSS-selected element, device and viewport settings, retina scale, dark mode, custom CSS and JavaScript, clicks, selector or network-idle waits, blocked ads and trackers, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen-TTL caching, signed image links, asynchronous webhooks and bulk capture of up to 100 URLs per call. An OpenAPI specification, usage API and compatibility with parameter names used by other screenshot APIs ease migration.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)
Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
const data = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', data);
See the parameter reference and examples in the ScreenshotNeo documentation. Before capture it accepts consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers report the page verdict and billing result. Its MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000, and every feature is on every plan. Create a free ScreenshotNeo account.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallFAQ
Does html2canvas support overflow-wrap?
The feature list names it, but the project also says CSS support is incomplete. Support in a list does not guarantee identical output for every value, layout or version.
Should I use anywhere or break-word?
Use break-word when emergency breaks should not affect min-content sizing; use anywhere when those opportunities should affect intrinsic sizing. Choose based on the layout as well as the screenshot.
Can onclone change my page permanently?
No. It receives the cloned document used by html2canvas, so the shown style changes are limited to that render unless your own code changes the live DOM elsewhere.
Frequently Asked Questions
Does html2canvas take a native browser screenshot?
No. It reconstructs a representation from DOM and implemented CSS, which is why the canvas can differ from the live page.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Is `word-break: break-word` always broken?
No. The outcome depends on the installed version, computed styles and the specific text and layout.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
