diff --git a/app/components/Code/Viewer.vue b/app/components/Code/Viewer.vue
index 90bcf0c221..ec544b6e83 100644
--- a/app/components/Code/Viewer.vue
+++ b/app/components/Code/Viewer.vue
@@ -3,6 +3,7 @@ const props = defineProps<{
   html: string
   lines: number
   selectedLines: { start: number; end: number } | null
+  wordWrap?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -10,6 +11,7 @@ const emit = defineEmits<{
 }>()
 
 const codeRef = useTemplateRef('codeRef')
+const lineNumbersRef = useTemplateRef('lineNumbersRef')
 
 // Generate line numbers array
 const lineNumbers = computed(() => {
@@ -32,6 +34,30 @@ function onLineClick(lineNum: number, event: MouseEvent) {
   emit('lineClick', lineNum, event)
 }
 
+// Synchronize line number heights with code line heights (needed for word wrap)
+function syncLineHeights() {
+  if (!props.wordWrap || !codeRef.value || !lineNumbersRef.value) {
+    // Reset heights if word wrap is disabled
+    if (lineNumbersRef.value) {
+      const nums = lineNumbersRef.value.querySelectorAll<HTMLElement>('.line-number')
+      nums.forEach(num => (num.style.height = ''))
+    }
+    return
+  }
+
+  const lines = codeRef.value.querySelectorAll<HTMLElement>('code > .line')
+  const nums = lineNumbersRef.value.querySelectorAll<HTMLElement>('.line-number')
+
+  lines.forEach((line, index) => {
+    const num = nums[index]
+    if (num) {
+      // Use getBoundingClientRect for more precision if needed, but offsetHeight is usually enough
+      const height = line.offsetHeight
+      num.style.height = `${height}px`
+    }
+  })
+}
+
 // Apply highlighting to code lines when selection changes
 function updateLineHighlighting() {
   if (!codeRef.value) return
@@ -53,11 +79,27 @@ function updateLineHighlighting() {
 watch(
   () => [props.selectedLines, props.html] as const,
   () => {
-    nextTick(updateLineHighlighting)
+    nextTick(() => {
+      updateLineHighlighting()
+      syncLineHeights()
+    })
   },
   { immediate: true },
 )
 
+// Also watch wordWrap specifically
+watch(
+  () => props.wordWrap,
+  () => {
+    nextTick(syncLineHeights)
+  },
+)
+
+// Sync on resize
+if (import.meta.client) {
+  useEventListener(window, 'resize', syncLineHeights)
+}
+
 // Use Nuxt's `navigateTo` for the rendered import links
 function handleImportLinkNavigate() {
   if (!codeRef.value) return
@@ -86,9 +128,10 @@ watch(
 </script>
 
 <template>
-  <div class="code-viewer flex min-h-full max-w-full">
+  <div class="code-viewer flex min-h-full max-w-full" :class="{ 'is-wrapped': wordWrap }">
     <!-- Line numbers column -->
     <div
+      ref="lineNumbersRef"
       class="line-numbers shrink-0 bg-bg-subtle border-ie border-solid border-border text-end select-none relative"
       :style="{ '--line-digits': lineDigits }"
       aria-hidden="true"
@@ -155,6 +198,12 @@ watch(
   transition: background-color 0.1s;
 }
 
+.is-wrapped .code-content :deep(.line) {
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: none;
+}
+
 /* Highlighted lines in code content - extend full width with negative margin */
 .code-content :deep(.line.highlighted) {
   @apply bg-yellow-500/20;
diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index cb1d3955d1..4256874516 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -275,6 +275,8 @@ function scrollToTop() {
 // Canonical URL for this code page
 const canonicalUrl = computed(() => `https://npmx.dev${getCodeUrl(route.params)}`)
 
+const wordWrap = useLocalStorage('npmx-code-word-wrap', false)
+
 // Toggle markdown view mode
 const markdownViewModes = [
   {
@@ -481,6 +483,15 @@ defineOgImageComponent('Default', {
                 <span class="i-lucide:arrow-up w-3 h-3" />
                 {{ $t('code.scroll_to_top') }}
               </button>
+              <button
+                type="button"
+                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors items-center inline-flex gap-1"
+                :class="{ 'bg-accent/10 text-accent border-accent/20': wordWrap }"
+                @click="wordWrap = !wordWrap"
+              >
+                <span class="i-lucide:wrap-text w-3 h-3" />
+                {{ $t('code.word_wrap') }}
+              </button>
               <button
                 v-if="selectedLines"
                 type="button"
@@ -525,6 +536,7 @@ defineOgImageComponent('Default', {
             :html="fileContent.html"
             :lines="fileContent.lines"
             :selected-lines="selectedLines"
+            :word-wrap="wordWrap"
             @line-click="handleLineClick"
           />
         </template>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index c187265c73..9b1caf72f3 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -793,6 +793,7 @@
     },
     "file_path": "File path",
     "scroll_to_top": "Scroll to top",
+    "word_wrap": "Word wrap",
     "binary_file": "Binary file",
     "binary_rendering_warning": "File type not supported for preview."
   },
diff --git a/i18n/schema.json b/i18n/schema.json
index 1ee624a990..735b332582 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -2383,6 +2383,9 @@
         "scroll_to_top": {
           "type": "string"
         },
+        "word_wrap": {
+          "type": "string"
+        },
         "binary_file": {
           "type": "string"
         },