Lorem Ipsum 產生器

什麼是 Lorem Ipsum？為什麼自己亂打的假文會騙人

Lorem Ipsum 是出版業沿用 500+ 年的「亂數假文」，源自 1500 年代的拉丁文排版用詞。 設計師、開發者用它來預覽版型、字體、字數空間配置，避免內容本身影響設計判斷。

本頁的做法是：頁面裡放著那份被排版業重複使用幾百年的拉丁單字表，隨機挑 8 到 16 個接成一句，句首大寫、句尾句點；你要幾句就湊成一段，段與段之間空一行。勾「以 Lorem ipsum dolor sit amet 開頭」的話，第一段第一句會換成那句大家認得的經典開頭，其餘照樣隨機。不連線、不儲存，每按一次「重新產生」，就在你自己的瀏覽器裡生出全新的一塊。

用拉丁文而不是自己打一排字的理由是：手打的假文會謊報文字的形狀。一整排 asdf asdf asdf 每個字一樣長，欄位右側的參差邊會平整得不自然，你永遠看不到一個真的十個字母的單字造成的難看斷行。把同一段複製五次更糟，因為格線裡每張卡片高度完全一樣，版面看起來很穩，其實不是。拉丁單字表以短字為主、偶爾夾幾個長的，跟英文散文夠接近，斷行、連字與段落最後一行的表現才會合理。

直接貼真的行銷文案則是從反方向壞事。畫面上一出現讀得懂的句子，檢視會就變成在吵字句，再也沒有人回頭看行高。

語言、輸出格式與長度怎麼選

為什麼有中文版？拉丁 Lorem Ipsum 字寬與中文差異大，無法準確預覽中文版型。 本工具的中文亂數用兩到四個字的常用詞隨機組合（含全形標點），長度與真實內容相近， 更適合測試繁中介面、字距、行高、斷字。

• 拉丁文 Lorem Ipsum：預設值，介面之後要出英文或其他歐語版本就選它。
• 中文亂數：常用詞隨機組合，每三到七個詞斷一個逗號，帶全形標點。拉丁文會嚴重誤導中文區塊，因為中文詞與詞之間沒有空白、斷行是斷在字與字之間，所以要看繁中、日文或韓文版面的行高與每行字數，就切這個。
• 純文字（Plain text）：設計軟體、簡報與文件，格式由那邊的軟體自己套。
• Markdown：CMS 欄位、README、MDX 檔。同時也需要一個標題來套樣式時，勾「加上「## Lorem Ipsum」標題」。
• HTML：段落已經包好 <p>，給靜態原型或 email 樣板。
• JSX：同樣的段落包在 fragment 裡，貼進 React 元件不用再重排格式。
• 值得背起來的幾組尺寸：1 段 1 句給卡片副標或首屏標語，1 段 2 句給清單項目，3 段 4 句是一般文章開頭的長度，15 段 6 句用來測 sticky 標題列與目錄要捲多久。

實戰教學：把設計稿或元件填滿

1. 先估真內容大概多長，再把段數與句數設得比它多一點。照最短的可能文字做設計，就是版面上線後爆掉的原因。
2. 依照文字要去的地方選輸出格式：設計軟體用純文字，React 元件用 JSX，內容檔用 Markdown。
3. 按「複製」貼過去。輸出框是唯讀的，只想要其中一段時自己用滑鼠選取那一段。
4. 每張卡片、每一欄各按一次「重新產生」，不要把同一塊貼進每一格。高度長得不一樣，對齊的問題才會現在被抓到，而不是上線之後。
5. 設計稿裡留一個真的字串：真的產品名、真的價格、真的日期。會撐爆版面的就是這些值，假文永遠不會告訴你。

實戰教學：用假文壓測版面

1. 先用你預期的長度確認元件正常，再把句數往上加到三倍長。固定高度的容器會截斷，只設了 min-height 卻沒寫 overflow 規則的卡片會壓到隔壁。
2. 反方向再來一次：1 段 1 句。太短的文字會照出塌掉的卡片、被頂上來的頁尾，以及一整排對不齊的按鈕。
3. 把瀏覽器縮到 360px 左右。拉丁單字很短，如果這裡就斷得難看，真的長網址或長的產品型號一定更慘。
4. 切到「中文亂數」再看一次。中文是全形字、視覺行高比較高，拉丁文塞得下的那一列，換成中文常常要多給一點行高。
5. 元件收工前，把假文換成你找得到最長的那個真字串。

把假文帶到你要用的地方

「複製」按鈕會把格式化過的整塊放進剪貼簿，跟畫面上看到的一模一樣，包含段落之間的空行，以及你選了 HTML 或 JSX 時的標籤。輸出框本身唯讀，但還是可以用滑鼠選取一部分，只要其中一段的時候就這樣做。

• Figma 與其他設計軟體：把文字圖層切到編輯模式再貼，否則段落斷行會被丟掉。固定尺寸的文字框要先改成自動高度，不然整塊會被無聲截掉。
• 程式碼編輯器：貼 JSX 或 HTML，讓 formatter 重新縮排。編輯器若設了貼上時自動格式化，片段會自動照你的行寬重排。
• CMS 或所見即所得欄位：選 Markdown 或純文字。把 HTML 貼進所見即所得編輯器，通常會變成被跳脫、當成文字顯示的標籤。
• 電腦：目的地太雞婆、自動幫你套格式時，改用 Ctrl+Shift+V 或 Cmd+Shift+V 貼成純文字。

編輯器、程式碼與文書軟體裡的同一件事

假文內建在比大家以為的更多工具裡，直接用眼前那一個，通常比開一個瀏覽器分頁來回還快。

VS Code 與任何支援 Emmet 的編輯器：在 HTML 檔輸入 lorem 按 Tab 就會展開。加數字指定字數，這個縮寫也能跟 Emmet 其他語法組合，一行就給你一整塊：

lorem            -> 30 個字
lorem10          -> 10 個字
p*3>lorem20      -> 三個 <p>，每個 20 個字

JavaScript 與 TypeScript 專案如果已經裝了假資料套件，假文就從同一個 import 拿，種子腳本與測試 fixture 該用的正是這個：

import { faker } from '@faker-js/faker'
faker.lorem.paragraphs(3, '\n\n')
faker.lorem.sentences(4)

Python 的 Faker 套件想法一樣，paragraphs() 回傳的是 list 而不是單一字串：

from faker import Faker
fake = Faker()
"\n\n".join(fake.paragraphs(nb=3))

LaTeX 把那段經典文字做成套件，\lipsum[1-3] 印出來的是原文的前三段，不是隨機組的：

\usepackage{lipsum}
\lipsum[1-3]

Microsoft Word：這功能藏在自動圖文集函式裡很多年了。在空白行輸入 =lorem(3,4) 按 Enter 得到三段各四句，或 =rand(3,4) 得到同樣結構的英文內容。實際字句會隨 Word 版本與語言不同，拿它做樣板前先看一眼輸出。設計軟體那邊通常是外掛而不是內建功能，可用的外掛換得很勤，與其相信你在哪裡看過的名字，不如直接翻當下的外掛目錄。

注意事項與隱私

會離開瀏覽器的資料：沒有。文字是在你的裝置上用 Math.random() 組出來的，結果不會上傳、不會被記錄也不會被儲存，你在輸出框裡改的東西同樣不會送到任何地方。也因為用的是 Math.random()，它不適合任何需要猜不到的場合，這裡的輸出絕對不要拿去當密碼、token 或測試金鑰。

把假文放進 alt 是無障礙的 bug。WCAG 2.1 要求替代文字要能達成跟圖片一樣的目的。貼進 alt、aria-label 或頁面標題的拉丁文，螢幕閱讀器會一個字一個字念出來，比裝飾性圖片留空的 alt="" 還糟。lang 屬性同理：標成 lang="en" 的頁面塞滿拉丁文或中文假文，會被用錯的語音念出來。

它會藏住「內容形狀」的問題。Lorem Ipsum 沒有連結、沒有數字、沒有人名，也沒有空狀態。它不會告訴你沒填自介的使用者會在卡片上留一個洞，不會告訴你 1,299.00 這種價格會把欄位對齊撞歪，也不會告訴你真的標題比你留的空間長一倍。假文是拿來做字體排印與格線的，內容設計要用真的、或接近真的字串。

中文模式產生的是詞，不是句子。它從兩到四個字的常用詞裡隨機挑，詞是真的詞，排在一起卻沒有文法，所以輸出對看得懂中文的人來說本來就是讀不通的，這是設計如此。量版面沒問題，拿它當搜尋、排序、翻譯或任何要給人讀的樣本資料就錯了。

別讓它跟著上線。假文外流到正式環境很常見，最常見的三條路徑是 meta description、圖片說明，以及塞進資料庫的種子資料。把 grep lorem 放進上線前的檢查清單，而且要看實際渲染出來的原始碼，不是只看畫面。