astro-join-line

Remove unwanted CJK spaces in Astro.

In CJK prose, the symptom looks like a small gap after punctuation. The cause is easy to miss: normal HTML whitespace processing collapses a source line feed into a space.

Where the gap comes from

This is not an Astro, React, or framework-specific bug. A soft line break from source text or Markdown eventually reaches an HTML text node, where the browser's default white-space: normal processing collapses it into a regular space. The rule is not specific to Chinese, but the result is conspicuous in CJK prose, which normally has no word spaces.

Source

article.mdx

With punctuation

1 第一行； LF ↵

2 第二行。

Without punctuation

1 第一行 LF ↵

2 第二行。

Browser output

white-space: normal

With punctuation

第一行；第二行。

Without punctuation

第一行第二行。

How it works

After installing astro-join-line, you can safely break a source line after supported CJK punctuation. The plugin removes only that eligible soft break, so the next line joins the punctuation in the output. A break after an ordinary character is left intact and still renders as a space, so continuous CJK text still cannot be wrapped arbitrarily.

Plugin enabled

The eligible soft line break is removed before output.

Source

article.mdx

1 第一行； LF ↵

2 第二行。

Browser output

No unwanted space

第一行；第二行。

Only soft breaks after supported punctuation are removed; intentional whitespace is preserved. Sensitive elements such as script, style, pre, code, and textarea are left untouched.

Install and configure

Terminal

pnpm add astro-join-line

Astro templates

Add the default integration to your Astro config.

astro.config.mjs

import { defineConfig } from 'astro/config'
import joinLine from 'astro-join-line'

export default defineConfig({
  integrations: [joinLine()],
})

Markdown and MDX

Use the Remark entry point with Astro's Markdown processor. The same processor is inherited by @astrojs/mdx.

astro.config.mjs

import { unified } from '@astrojs/markdown-remark'
import mdx from '@astrojs/mdx'
import remarkJoinLine from 'astro-join-line/remark'
import { defineConfig } from 'astro/config'

export default defineConfig({
  markdown: {
    processor: unified({
      remarkPlugins: [remarkJoinLine],
    }),
  },
  integrations: [mdx()],
})

GitHub npm