iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Short answer: word-break: break-word does not universally fail in html2canvas. The library rebuilds a page from DOM and the CSS it has implemented rather than taking a native browser screenshot, so wrapping can differ from the live page when a property, font metric, width, or layout case is only partially supported. For long URLs and similar strings, use overflow-wrap: break-word, verify the installed html2canvas version, and, when necessary, apply a targeted style in the render-only clone.
Why the canvas image can disagree with the browser
html2canvas traverses your DOM, reads computed styles, and paints its own representation onto a canvas. It is not the same as the browser’s compositor and does not capture pixels from the screen. The project FAQ therefore warns that CSS support is incomplete: every property must be implemented manually for it to render correctly. The feature list includes both word-break and overflow-wrap, but listing a property does not guarantee identical behavior for every value and layout.
That distinction explains the common symptom: the live element wraps, while the generated image lets a long token run outside its box, clips it, or produces a different line break. The result depends on your html2canvas release, the computed styles on the captured node, fonts available at capture time, and the exact combination of width, white-space, display, and text content.
Recommended Free Tools
First, confirm what is actually failing
- Capture the same element and viewport. Keep the browser width, device-pixel ratio, content, and zoom unchanged while comparing the live element with the canvas.
- Inspect computed styles. In DevTools, check
word-break,overflow-wrap,white-space, width, font family, font size, and line-height on the actual text container—not only on a parent rule. - Identify the token. A normal sentence, a long URL, a hash, an email-like identifier, and text containing non-breaking spaces have different legal break opportunities.
- Check overflow. Temporarily add a visible border and
overflow: visibleto see whether the text is wider than the element before html2canvas starts. - Check the dependency version. Print the version from your package lockfile or package manager and reproduce with that exact build. Do not assume a browser result proves the canvas renderer receives the same styles.
Choose the CSS rule that matches the intended behavior
| Rule | What it does | When to use it | Trade-off |
|---|---|---|---|
overflow-wrap: break-word |
Allows a break inside an otherwise unbreakable string when it would overflow. | Long URLs, IDs, hashes, and product codes that should remain intact when they fit. | Introduced opportunities do not affect intrinsic min-content sizing. |
overflow-wrap: anywhere |
Allows breaks at any point when needed and counts those opportunities during min-content sizing. | Layouts where intrinsic sizing must account for emergency breaks. | Can produce earlier or more aggressive wrapping in flexible layouts. |
word-break: break-all |
Permits breaks between characters. | Last-resort protection for scripts or content where breaking anywhere is acceptable. | Readability suffers because ordinary words can split. |
word-break: break-word |
A legacy/deprecated value documented as behaving like overflow-wrap: anywhere with word-break: normal. |
Existing code you must understand or migrate. | Not the preferred modern spelling; behavior and intrinsic sizing differ from overflow-wrap: break-word. |
For most English-language cards and screenshots, start with:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.capture-text {
overflow-wrap: break-word;
word-break: normal;
}
Keep white-space: normal unless preserving spaces is intentional. A parent with white-space: nowrap, a fixed width, or an unbreakable non-breaking space can defeat an otherwise correct wrapping rule.
Use a render-only override with onclone
html2canvas provides onclone, called after it creates the document clone used for rendering. You can modify that clone without changing the page the user sees. This is useful for testing whether the problem is a CSS rule rather than content or sizing.
import html2canvas from 'html2canvas';
const element = document.querySelector('#receipt');
const canvas = await html2canvas(element, {
onclone(clonedDocument) {
clonedDocument.querySelectorAll('.capture-text').forEach((node) => {
node.style.overflowWrap = 'break-word';
node.style.wordBreak = 'normal';
node.style.whiteSpace = 'normal';
});
}
});
document.querySelector('#preview').replaceChildren(canvas);
This pattern is a diagnostic and implementation option, not a guarantee for every layout. Use the same selector that exists inside the captured subtree. If the override works, move the rule into your normal stylesheet when possible; retain onclone when the change is needed only for exports.
Windows 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 reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteUpdate old html2canvas installations
The project changelog records an overflow-wrap: break-word fix in html2canvas 1.2.0, dated August 4, 2021. If your lockfile resolves an older release, upgrade in a branch and compare output in your target browsers. That entry is evidence of a historical fix, not proof that every current wrapping case is solved.
npm install html2canvas@latest
# or, for a reproducible project, choose a tested version explicitly:
npm install html2canvas@1.4.1
After changing versions, clear stale bundles and confirm the version actually shipped to production. A duplicate copy loaded by a CDN or another dependency can leave the old renderer in use.
Fonts, dimensions, and timing that commonly change line breaks
Wait for fonts and images
Capture only after web fonts have loaded. Otherwise the fallback font can be wider or narrower, changing where lines break. In an async flow, wait for document.fonts.ready and for any images that determine the container height.
await document.fonts.ready;
await Promise.all([...document.images].map((img) => {
if (img.complete) return Promise.resolve();
return new Promise((resolve) => {
img.addEventListener('load', resolve, { once: true });
img.addEventListener('error', resolve, { once: true });
});
}));
Make the capture geometry deterministic
- Set an explicit width on the capture root or use html2canvas’s viewport options consistently.
- Avoid measuring one element and capturing another whose width changes after layout.
- Do not confuse a high
scalevalue with more CSS width; scale changes pixel density, not wrapping rules. - Check flex and grid children for
min-width: auto. A child that refuses to shrink can make text appear unbreakable;min-width: 0on the relevant flex or grid item often restores the intended constraint.
Remove conflicting declarations
Search the cascade for white-space: nowrap, word-break: keep-all, unusually large letter spacing, transforms, and pseudo-elements containing text. Inspect the cloned document in a temporary onclone callback if the original DOM looks correct.
A practical diagnostic sequence
- Reduce the case to one element containing one long token.
- Apply
overflow-wrap: break-word; word-break: normal; white-space: normal. - Give the element a fixed test width and visible border.
- Wait for fonts, then capture at a known viewport.
- Try the same rule through
onclone. If only the clone works, an inherited or late-applied style is involved. - Compare an updated html2canvas build with the locked production build.
- If it still differs, test
overflow-wrap: anywhere; usebreak-allonly when character-level breaks are acceptable.
Troubleshooting symptoms
Text is clipped at the right edge
The token has no usable break opportunity, or the captured width is smaller than the live width. Confirm computed width and white-space, then apply overflow-wrap: break-word in the clone.
Every character breaks
word-break: break-all or overflow-wrap: anywhere may be inherited or applied globally. Scope the rule to the export component and restore word-break: normal.
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
The browser wraps but the image does not
Check version, loaded fonts, and clone styles. html2canvas’s partial CSS implementation means a browser-only success is not conclusive.
The fix changes the page while users interact with it
Move the declaration into onclone so it applies only to the rendering clone.
Changing CSS has no effect
Verify that the selector is inside the captured subtree, that another declaration is not winning, and that you are looking at the newly generated canvas rather than a cached export.
Best Value
Or skip the browser setup
When you need a dependable image or PDF rather than a client-side reconstruction, ScreenshotNeo captures the URL in a real browser environment through one request. Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify 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.
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 fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));
See the full options and response details in the ScreenshotNeo documentation. Every plan includes the capture controls, including full-page lazy-image loading, CSS-selector element capture, device presets, custom viewport and retina scale, PDF settings, custom CSS and JavaScript, clicks, waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen-TTL caching, signed links, async webhooks, bulk capture of up to 100 URLs per call, usage data, and an OpenAPI specification. Existing parameter names used by other screenshot APIs are accepted to ease migration.
The Free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →FAQ
Does html2canvas support overflow-wrap?
The feature list names it, and the changelog records a fix in 1.2.0, but the project’s FAQ still describes CSS support as partial. Validate the exact version and case you deploy.
Should I replace all word-break: break-word declarations?
Not blindly. Migrate rules where you mean emergency breaks in long strings, but check the desired intrinsic sizing and the visual result before changing a shared component.
Can I use onclone to change production styles permanently?
No. It changes only the cloned document used for that render. Make a normal stylesheet change when the same behavior is required on the live page.
Why does a URL behave differently from ordinary prose?
Spaces provide natural break opportunities in prose; a URL or hash may contain none. It therefore exposes differences in overflow handling much sooner.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →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.
