tify-center","children":"WooCommerce Info Boxes under Add to Cart"}]}]]}],["$","div",null,{"className":"text-xs flex items-center justify-end space-x-3 text-foreground/60","children":["$","div",null,{"className":"hidden md:inline-flex opacity-0 group-hover:opacity-100 items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border-transparent bg-primary hover:bg-primary/80 text-red-600","children":"read article"}]}]]}]}]]]}]]}] f:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Truncating Text with Text-Overflow / Powered by Dev Resource / dev-resources.site 💗"}],["$","meta","3",{"name":"description","content":"Find everything you need for coding and development at dev-resources.site, including tools, guides, and code to streamline your workflow."}],["$","meta","4",{"name":"google-site-verification","content":"W3xG0R8ES_dhlXhNnP1VNN03oAQG2hYF_1ZCpf5ETak"}],["$","meta","5",{"name":"google-adsense-account","content":"ca-pub-5834256338017594"}],["$","meta","6",{"name":"google-site-verification","content":"W3xG0R8ES_dhlXhNnP1VNN03oAQG2hYF_1ZCpf5ETak"}],["$","meta","7",{"property":"og:title","content":"Truncating Text with Text-Overflow / Powered by Dev Resource / dev-resources.site 💗"}],["$","meta","8",{"property":"og:description","content":"

When building websites we often find ourselves in situations where text within an html element goes beyond the available space. To keep things looking nice and readable we can use the css text-overflow property.

\n\n

See the following Codepen for a demo:
\n\n\n

\n\n

Full article: Truncating Text with Text-Overflow
\nCSS Snippets

"}],["$","meta","9",{"property":"og:url","content":"https://dev.to/snippflow/truncating-text-with-text-overflow-54g0"}],["$","meta","10",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","11",{"name":"twitter:title","content":"Truncating Text with Text-Overflow / Powered by Dev Resource / dev-resources.site 💗"}],["$","meta","12",{"name":"twitter:description","content":"

\n\n

See the following Codepen for a demo:
\n\n\n

\n\n

Full article: Truncating Text with Text-Overflow
\nCSS Snippets

"}],["$","link","13",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] 3:null 1e:I[7558,["609","static/chunks/609-cc37860f8f268b0f.js","691","static/chunks/app/content/%5B...data%5D/page-2449eaf8da25debc.js"],"default"] 12:["$","div","0",{"className":"mb-4 prose prose-sm md:prose-base prose-invert prose-neutral max-w-none","children":[["$","div",null,{"className":"mb-4 rounded-xl grid grid-cols-1 border border-neutral-800 divide-y divide-neutral-800 overflow-hidden","children":[["$","div",null,{"className":"p-2 px-4 py-6 flex flex-row justify-between bg-neutral-900 relative","children":["$","h1",null,{"className":"pb-0 mb-0","children":"Truncating Text with Text-Overflow"}]}],["$","div",null,{"className":"p-2 px-4 flex flex-row justify-between bg-neutral-900 relative","children":[["$","div",null,{"className":"font-bold text-foreground text-xs md:text-base flex items-center justify-center","children":"Published at"}],["$"