[{"data":1,"prerenderedAt":886},["ShallowReactive",2],{"guide-lorem-ipsum-responsive-design":3},{"id":4,"title":5,"body":6,"date":878,"description":879,"extension":880,"meta":881,"navigation":344,"path":882,"readingTime":106,"seo":883,"stem":884,"__hash__":885},"guides\u002Fguides\u002Florem-ipsum-responsive-design.md","Using Lorem Ipsum in Responsive Design Testing",{"type":7,"value":8,"toc":856},"minimark",[9,14,18,21,25,30,33,110,114,117,197,200,204,208,211,293,297,300,426,430,434,437,579,586,590,593,661,665,668,681,685,689,770,774,777,810,814,834,838,847,852],[10,11,13],"h2",{"id":12},"placeholder-text-and-responsive-layouts","Placeholder Text and Responsive Layouts",[15,16,17],"p",{},"Responsive design depends on content behaving predictably across screen sizes. When layouts shift from desktop to mobile, text reflows, elements stack, and containers resize. Lorem Ipsum gives you controlled, repeatable text to test these transitions systematically.",[15,19,20],{},"The key is using placeholder text intentionally rather than randomly. Different word counts, paragraph lengths, and heading sizes expose different layout failures at each breakpoint.",[10,22,24],{"id":23},"testing-text-overflow-at-breakpoints","Testing Text Overflow at Breakpoints",[26,27,29],"h3",{"id":28},"the-overflow-problem","The Overflow Problem",[15,31,32],{},"Long words, unbroken strings, and wide paragraphs break responsive layouts more often than short ones. A heading that fits on desktop may overflow its container on mobile.",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-css shiki shiki-themes github-light github-dark","\u002F* Prevent long words from breaking layout *\u002F\n.responsive-text {\n  overflow-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n}\n","css","",[41,42,43,52,63,79,91,104],"code",{"__ignoreMap":39},[44,45,48],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"sJ8bj","\u002F* Prevent long words from breaking layout *\u002F\n",[44,53,55,59],{"class":46,"line":54},2,[44,56,58],{"class":57},"sScJk",".responsive-text",[44,60,62],{"class":61},"sVt8B"," {\n",[44,64,66,70,73,76],{"class":46,"line":65},3,[44,67,69],{"class":68},"sj4cs","  overflow-wrap",[44,71,72],{"class":61},": ",[44,74,75],{"class":68},"break-word",[44,77,78],{"class":61},";\n",[44,80,82,85,87,89],{"class":46,"line":81},4,[44,83,84],{"class":68},"  word-break",[44,86,72],{"class":61},[44,88,75],{"class":68},[44,90,78],{"class":61},[44,92,94,97,99,102],{"class":46,"line":93},5,[44,95,96],{"class":68},"  hyphens",[44,98,72],{"class":61},[44,100,101],{"class":68},"auto",[44,103,78],{"class":61},[44,105,107],{"class":46,"line":106},6,[44,108,109],{"class":61},"}\n",[26,111,113],{"id":112},"structured-lorem-ipsum-testing","Structured Lorem Ipsum Testing",[15,115,116],{},"Generate specific paragraph lengths to test each breakpoint:",[118,119,120,139],"table",{},[121,122,123],"thead",{},[124,125,126,130,133,136],"tr",{},[127,128,129],"th",{},"Element",[127,131,132],{},"Desktop (1024px+)",[127,134,135],{},"Tablet (768px)",[127,137,138],{},"Mobile (375px)",[140,141,142,157,171,185],"tbody",{},[124,143,144,148,151,154],{},[145,146,147],"td",{},"H1",[145,149,150],{},"60 chars",[145,152,153],{},"40 chars",[145,155,156],{},"30 chars",[124,158,159,162,165,168],{},[145,160,161],{},"H2",[145,163,164],{},"50 chars",[145,166,167],{},"35 chars",[145,169,170],{},"25 chars",[124,172,173,176,179,182],{},[145,174,175],{},"Body paragraph",[145,177,178],{},"200 words",[145,180,181],{},"150 words",[145,183,184],{},"100 words",[124,186,187,190,193,195],{},[145,188,189],{},"Card excerpt",[145,191,192],{},"80 chars",[145,194,150],{},[145,196,153],{},[15,198,199],{},"Using consistent word counts across tests ensures you catch the same edge cases every time. A Lorem Ipsum generator that lets you specify paragraph length makes this repeatable.",[10,201,203],{"id":202},"responsive-typography-patterns","Responsive Typography Patterns",[26,205,207],{"id":206},"fluid-type-scaling","Fluid Type Scaling",[15,209,210],{},"Lorem Ipsum helps you verify that fluid typography scales smoothly. Test with long headings to confirm nothing clips at intermediate viewport widths.",[34,212,214],{"className":36,"code":213,"language":38,"meta":39,"style":39},"\u002F* Fluid type with clamp *\u002F\nh1 {\n  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);\n  line-height: 1.2;\n}\n",[41,215,216,221,229,277,289],{"__ignoreMap":39},[44,217,218],{"class":46,"line":47},[44,219,220],{"class":50},"\u002F* Fluid type with clamp *\u002F\n",[44,222,223,227],{"class":46,"line":54},[44,224,226],{"class":225},"s9eBZ","h1",[44,228,62],{"class":61},[44,230,231,234,236,239,242,245,249,252,255,258,262,265,267,269,272,274],{"class":46,"line":65},[44,232,233],{"class":68},"  font-size",[44,235,72],{"class":61},[44,237,238],{"class":68},"clamp",[44,240,241],{"class":61},"(",[44,243,244],{"class":68},"1.5",[44,246,248],{"class":247},"szBVR","rem",[44,250,251],{"class":61},", ",[44,253,254],{"class":68},"4",[44,256,257],{"class":247},"vw",[44,259,261],{"class":260},"s4XuR"," +",[44,263,264],{"class":68}," 1",[44,266,248],{"class":247},[44,268,251],{"class":61},[44,270,271],{"class":68},"3",[44,273,248],{"class":247},[44,275,276],{"class":61},");\n",[44,278,279,282,284,287],{"class":46,"line":81},[44,280,281],{"class":68},"  line-height",[44,283,72],{"class":61},[44,285,286],{"class":68},"1.2",[44,288,78],{"class":61},[44,290,291],{"class":46,"line":93},[44,292,109],{"class":61},[26,294,296],{"id":295},"line-length-and-readability","Line Length and Readability",[15,298,299],{},"Optimal line length for body text falls between 50 and 75 characters. Lorem Ipsum paragraphs make it easy to measure this across breakpoints:",[34,301,303],{"className":36,"code":302,"language":38,"meta":39,"style":39},"\u002F* Constrain line length *\u002F\n.prose {\n  max-width: 65ch; \u002F* approximately 65 characters *\u002F\n}\n\n\u002F* Adjust for smaller screens *\u002F\n@media (max-width: 768px) {\n  .prose {\n    max-width: 100%;\n    padding: 0 1rem;\n  }\n}\n",[41,304,305,310,317,336,340,346,351,374,382,398,415,421],{"__ignoreMap":39},[44,306,307],{"class":46,"line":47},[44,308,309],{"class":50},"\u002F* Constrain line length *\u002F\n",[44,311,312,315],{"class":46,"line":54},[44,313,314],{"class":57},".prose",[44,316,62],{"class":61},[44,318,319,322,324,327,330,333],{"class":46,"line":65},[44,320,321],{"class":68},"  max-width",[44,323,72],{"class":61},[44,325,326],{"class":68},"65",[44,328,329],{"class":247},"ch",[44,331,332],{"class":61},"; ",[44,334,335],{"class":50},"\u002F* approximately 65 characters *\u002F\n",[44,337,338],{"class":46,"line":81},[44,339,109],{"class":61},[44,341,342],{"class":46,"line":93},[44,343,345],{"emptyLinePlaceholder":344},true,"\n",[44,347,348],{"class":46,"line":106},[44,349,350],{"class":50},"\u002F* Adjust for smaller screens *\u002F\n",[44,352,354,357,360,363,365,368,371],{"class":46,"line":353},7,[44,355,356],{"class":247},"@media",[44,358,359],{"class":61}," (",[44,361,362],{"class":68},"max-width",[44,364,72],{"class":61},[44,366,367],{"class":68},"768",[44,369,370],{"class":247},"px",[44,372,373],{"class":61},") {\n",[44,375,377,380],{"class":46,"line":376},8,[44,378,379],{"class":57},"  .prose",[44,381,62],{"class":61},[44,383,385,388,390,393,396],{"class":46,"line":384},9,[44,386,387],{"class":68},"    max-width",[44,389,72],{"class":61},[44,391,392],{"class":68},"100",[44,394,395],{"class":247},"%",[44,397,78],{"class":61},[44,399,401,404,406,409,411,413],{"class":46,"line":400},10,[44,402,403],{"class":68},"    padding",[44,405,72],{"class":61},[44,407,408],{"class":68},"0",[44,410,264],{"class":68},[44,412,248],{"class":247},[44,414,78],{"class":61},[44,416,418],{"class":46,"line":417},11,[44,419,420],{"class":61},"  }\n",[44,422,424],{"class":46,"line":423},12,[44,425,109],{"class":61},[10,427,429],{"id":428},"grid-and-flexbox-layout-testing","Grid and Flexbox Layout Testing",[26,431,433],{"id":432},"card-grid-overflow","Card Grid Overflow",[15,435,436],{},"Card layouts often break when placeholder text pushes cards beyond their expected height. Test with varying paragraph lengths to ensure your grid handles uneven content:",[34,438,442],{"className":439,"code":440,"language":441,"meta":39,"style":39},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n  \u003C!-- Each card should handle different text lengths -->\n  \u003Cdiv class=\"card\">\n    \u003Ch3>Short Title\u003C\u002Fh3>\n    \u003Cp>Lorem ipsum dolor sit amet, consectetur adipiscing elit.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"card\">\n    \u003Ch3>A Much Longer Title That Wraps on Mobile\u003C\u002Fh3>\n    \u003Cp>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html",[41,443,444,465,470,486,500,513,522,536,549,562,570],{"__ignoreMap":39},[44,445,446,449,452,455,458,462],{"class":46,"line":47},[44,447,448],{"class":61},"\u003C",[44,450,451],{"class":225},"div",[44,453,454],{"class":57}," class",[44,456,457],{"class":61},"=",[44,459,461],{"class":460},"sZZnC","\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"",[44,463,464],{"class":61},">\n",[44,466,467],{"class":46,"line":54},[44,468,469],{"class":50},"  \u003C!-- Each card should handle different text lengths -->\n",[44,471,472,475,477,479,481,484],{"class":46,"line":65},[44,473,474],{"class":61},"  \u003C",[44,476,451],{"class":225},[44,478,454],{"class":57},[44,480,457],{"class":61},[44,482,483],{"class":460},"\"card\"",[44,485,464],{"class":61},[44,487,488,491,493,496,498],{"class":46,"line":81},[44,489,490],{"class":61},"    \u003C",[44,492,26],{"class":225},[44,494,495],{"class":61},">Short Title\u003C\u002F",[44,497,26],{"class":225},[44,499,464],{"class":61},[44,501,502,504,506,509,511],{"class":46,"line":93},[44,503,490],{"class":61},[44,505,15],{"class":225},[44,507,508],{"class":61},">Lorem ipsum dolor sit amet, consectetur adipiscing elit.\u003C\u002F",[44,510,15],{"class":225},[44,512,464],{"class":61},[44,514,515,518,520],{"class":46,"line":106},[44,516,517],{"class":61},"  \u003C\u002F",[44,519,451],{"class":225},[44,521,464],{"class":61},[44,523,524,526,528,530,532,534],{"class":46,"line":353},[44,525,474],{"class":61},[44,527,451],{"class":225},[44,529,454],{"class":57},[44,531,457],{"class":61},[44,533,483],{"class":460},[44,535,464],{"class":61},[44,537,538,540,542,545,547],{"class":46,"line":376},[44,539,490],{"class":61},[44,541,26],{"class":225},[44,543,544],{"class":61},">A Much Longer Title That Wraps on Mobile\u003C\u002F",[44,546,26],{"class":225},[44,548,464],{"class":61},[44,550,551,553,555,558,560],{"class":46,"line":384},[44,552,490],{"class":61},[44,554,15],{"class":225},[44,556,557],{"class":61},">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.\u003C\u002F",[44,559,15],{"class":225},[44,561,464],{"class":61},[44,563,564,566,568],{"class":46,"line":400},[44,565,517],{"class":61},[44,567,451],{"class":225},[44,569,464],{"class":61},[44,571,572,575,577],{"class":46,"line":417},[44,573,574],{"class":61},"\u003C\u002F",[44,576,451],{"class":225},[44,578,464],{"class":61},[15,580,581,582,585],{},"Use ",[41,583,584],{},"align-items: start"," on flex containers when cards should maintain independent heights rather than stretching to match the tallest card.",[26,587,589],{"id":588},"navigation-text-truncation","Navigation Text Truncation",[15,591,592],{},"Responsive navigation often truncates menu items on smaller screens. Lorem Ipsum labels reveal whether your truncation strategy works:",[34,594,596],{"className":36,"code":595,"language":38,"meta":39,"style":39},".nav-item {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 10ch; \u002F* truncate after ~10 characters *\u002F\n}\n",[41,597,598,605,617,629,641,657],{"__ignoreMap":39},[44,599,600,603],{"class":46,"line":47},[44,601,602],{"class":57},".nav-item",[44,604,62],{"class":61},[44,606,607,610,612,615],{"class":46,"line":54},[44,608,609],{"class":68},"  white-space",[44,611,72],{"class":61},[44,613,614],{"class":68},"nowrap",[44,616,78],{"class":61},[44,618,619,622,624,627],{"class":46,"line":65},[44,620,621],{"class":68},"  overflow",[44,623,72],{"class":61},[44,625,626],{"class":68},"hidden",[44,628,78],{"class":61},[44,630,631,634,636,639],{"class":46,"line":81},[44,632,633],{"class":68},"  text-overflow",[44,635,72],{"class":61},[44,637,638],{"class":68},"ellipsis",[44,640,78],{"class":61},[44,642,643,645,647,650,652,654],{"class":46,"line":93},[44,644,321],{"class":68},[44,646,72],{"class":61},[44,648,649],{"class":68},"10",[44,651,329],{"class":247},[44,653,332],{"class":61},[44,655,656],{"class":50},"\u002F* truncate after ~10 characters *\u002F\n",[44,658,659],{"class":46,"line":106},[44,660,109],{"class":61},[10,662,664],{"id":663},"dark-mode-and-responsive-text","Dark Mode and Responsive Text",[15,666,667],{},"Responsive designs that support dark mode need contrast testing at every breakpoint. Lorem Ipsum paragraphs in both modes reveal contrast issues:",[669,670,671,675,678],"ul",{},[672,673,674],"li",{},"Light text on dark backgrounds may appear bolder due to halation",[672,676,677],{},"Font weights that look fine on desktop may feel too thin on mobile in dark mode",[672,679,680],{},"Placeholder text lets you focus on visual contrast without content distraction",[10,682,684],{"id":683},"common-responsive-text-mistakes","Common Responsive Text Mistakes",[26,686,688],{"id":687},"fixed-widths-on-text-containers","Fixed Widths on Text Containers",[34,690,692],{"className":36,"code":691,"language":38,"meta":39,"style":39},"\u002F* Bad: fixed width prevents reflow *\u002F\n.sidebar-text {\n  width: 300px; \u002F* overflows on screens under 320px *\u002F\n}\n\n\u002F* Good: flexible width *\u002F\n.sidebar-text {\n  max-width: 300px;\n  width: 100%;\n}\n",[41,693,694,699,706,723,727,731,736,742,754,766],{"__ignoreMap":39},[44,695,696],{"class":46,"line":47},[44,697,698],{"class":50},"\u002F* Bad: fixed width prevents reflow *\u002F\n",[44,700,701,704],{"class":46,"line":54},[44,702,703],{"class":57},".sidebar-text",[44,705,62],{"class":61},[44,707,708,711,713,716,718,720],{"class":46,"line":65},[44,709,710],{"class":68},"  width",[44,712,72],{"class":61},[44,714,715],{"class":68},"300",[44,717,370],{"class":247},[44,719,332],{"class":61},[44,721,722],{"class":50},"\u002F* overflows on screens under 320px *\u002F\n",[44,724,725],{"class":46,"line":81},[44,726,109],{"class":61},[44,728,729],{"class":46,"line":93},[44,730,345],{"emptyLinePlaceholder":344},[44,732,733],{"class":46,"line":106},[44,734,735],{"class":50},"\u002F* Good: flexible width *\u002F\n",[44,737,738,740],{"class":46,"line":353},[44,739,703],{"class":57},[44,741,62],{"class":61},[44,743,744,746,748,750,752],{"class":46,"line":376},[44,745,321],{"class":68},[44,747,72],{"class":61},[44,749,715],{"class":68},[44,751,370],{"class":247},[44,753,78],{"class":61},[44,755,756,758,760,762,764],{"class":46,"line":384},[44,757,710],{"class":68},[44,759,72],{"class":61},[44,761,392],{"class":68},[44,763,395],{"class":247},[44,765,78],{"class":61},[44,767,768],{"class":46,"line":400},[44,769,109],{"class":61},[26,771,773],{"id":772},"missing-min-width-on-short-text","Missing Min-Width on Short Text",[15,775,776],{},"Empty or very short text can collapse containers. Test with both long and short Lorem Ipsum paragraphs:",[34,778,780],{"className":36,"code":779,"language":38,"meta":39,"style":39},".card {\n  min-height: 120px; \u002F* prevent collapse with minimal content *\u002F\n}\n",[41,781,782,789,806],{"__ignoreMap":39},[44,783,784,787],{"class":46,"line":47},[44,785,786],{"class":57},".card",[44,788,62],{"class":61},[44,790,791,794,796,799,801,803],{"class":46,"line":54},[44,792,793],{"class":68},"  min-height",[44,795,72],{"class":61},[44,797,798],{"class":68},"120",[44,800,370],{"class":247},[44,802,332],{"class":61},[44,804,805],{"class":50},"\u002F* prevent collapse with minimal content *\u002F\n",[44,807,808],{"class":46,"line":65},[44,809,109],{"class":61},[10,811,813],{"id":812},"key-takeaways","Key Takeaways",[669,815,816,819,822,825,828,831],{},[672,817,818],{},"Use controlled paragraph lengths to test layout behavior at each breakpoint",[672,820,821],{},"Test text overflow with long headings and unbroken strings",[672,823,824],{},"Verify fluid typography scaling with Lorem Ipsum at intermediate viewport widths",[672,826,827],{},"Card grids need testing with uneven paragraph lengths to prevent layout shifts",[672,829,830],{},"Dark mode contrast should be checked at mobile breakpoints, not just desktop",[672,832,833],{},"Avoid fixed widths on text containers; use max-width with percentage fallbacks",[10,835,837],{"id":836},"try-it-yourself","Try It Yourself",[15,839,840,841,846],{},"Generate exactly the paragraph lengths you need for responsive testing with our free ",[842,843,845],"a",{"href":844},"\u002Ftools\u002Florem-ipsum","Lorem Ipsum Generator",". Specify word counts, paragraph counts, and sentence structure — all processed locally in your browser.",[15,848,849],{},[842,850,851],{"href":844},"Try the Lorem Ipsum Generator →",[853,854,855],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":39,"searchDepth":54,"depth":54,"links":857},[858,859,863,867,871,872,876,877],{"id":12,"depth":54,"text":13},{"id":23,"depth":54,"text":24,"children":860},[861,862],{"id":28,"depth":65,"text":29},{"id":112,"depth":65,"text":113},{"id":202,"depth":54,"text":203,"children":864},[865,866],{"id":206,"depth":65,"text":207},{"id":295,"depth":65,"text":296},{"id":428,"depth":54,"text":429,"children":868},[869,870],{"id":432,"depth":65,"text":433},{"id":588,"depth":65,"text":589},{"id":663,"depth":54,"text":664},{"id":683,"depth":54,"text":684,"children":873},[874,875],{"id":687,"depth":65,"text":688},{"id":772,"depth":65,"text":773},{"id":812,"depth":54,"text":813},{"id":836,"depth":54,"text":837},"2026-05-28","Learn how Lorem Ipsum helps test responsive layouts. Discover text overflow, truncation, and breakpoint strategies for mobile-first design.","md",{"immutable":344},"\u002Fguides\u002Florem-ipsum-responsive-design",{"title":5,"description":879},"guides\u002Florem-ipsum-responsive-design","HB3FePTeVVTiSecddIDqYkjFn6uHWE8caQi5ULvXX24",1780401335022]