Demo
Quillo renders a page on the server, then resumes its components in the browser from the state the server sent, so a page shows at once and reacts as soon as it is touched. What someone typed and clicked before the script came is kept and done then. A component that runs by itself loads as soon as the page is idle; the rest wait until they are reached, so a page with a hundred of them costs no more than one.
Quillo renders a page on the server, then resumes its components in the browser from the state the server sent, so a page shows at once and reacts as soon as it is touched. What someone typed and clicked before the script came is kept and done then. A component that runs by itself loads as soon as the page is idle; the rest wait until they are reached, so a page with a hundred of them costs no more than one.
A second paragraph that is cut away with the rest.
Nothing is cut with lines={0}, however long the text is, which is handy when the limit comes from a setting.
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/line_clamp.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/line_clamp.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/line_clamp.qwe
let line_clamp_demo_text = "Quillo renders a page on the server, then resumes its components in the browser from the state the server sent, so a page shows at once and reacts as soon as it is touched. What someone typed and clicked before the script came is kept and done then. A component that runs by itself loads as soon as the page is idle; the rest wait until they are reached, so a page with a hundred of them costs no more than one."view LineClampDemo() = <div.demo-stack.demo-narrow> <LineClamp lines={2} text={line_clamp_demo_text} id="line-clamp-demo-two"/> <LineClamp lines={3} id="line-clamp-demo-three"> <p>{line_clamp_demo_text}</p> <p>A second paragraph that is cut away with the rest.</p> </LineClamp> <LineClamp lines={0} text="Nothing is cut with lines={0}, however long the text is, which is handy when the limit comes from a setting." id="line-clamp-demo-none"/> </div>Source
ui/line_clamp.qwe
// LineClamp: text cut after a number of lines, with an ellipsis on the last: a// description in a card, a comment in a list.//// <LineClamp lines={2} text={product.description}/>// <LineClamp lines={3}><p>Any HTML, cut after three lines.</p></LineClamp>//// lines: how many to show (3); 0 shows it all. text: the text; its whole is then the// element's title, shown on hover. children: HTML instead of text. tag: "div"// (default), "p" or "span". id: the element's id. For a Read more button, see ReadMore.import ui/theme.qwe use ui_clslet line_clamp_css = css`.ui-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--ui-clamp, 3); overflow: hidden; overflow-wrap: anywhere; }.ui-clamp > :first-child { margin-top: 0; }.ui-clamp > :last-child { margin-bottom: 0; }p.ui-clamp { margin: 0; }`view LineClamp(lines: int = 3, text: str? = null, tag: str = "div", id: str? = null, class: str? = null, children) { style global line_clamp_css let cls = ui_cls([lines > 0 && "ui-clamp", class]) let style = lines > 0 ? `--ui-clamp: ${lines}` : null let body = text ?? children match tag { "p" => <p class={cls} id={id} title={text} style={style}>{body}</p> "span" => <span class={cls} id={id} title={text} style={style}>{body}</span> _ => <div class={cls} id={id} title={text} style={style}>{body}</div> }}Related
TruncateText kept to one line and cut with an ellipsis at the end or the middle, with the whole text in its title.5 views · 6 downloadsAbbrAn abbreviation whose expansion shows in a bubble on hover or focus and is read out by screen readers.6 views · 5 downloadsBlockquoteA quotation with the person and the source in a figure, as a bar, with a quote mark, or plain.6 views · 7 downloadsBulletListAn unordered list with dot, tick, arrow, star, dash or any glyph bullets, in a tone and a spacing.6 views · 7 downloadsCaptionSmall muted text under a figure, a table or a field, as the right element for each.5 views · 8 downloadsDropCapA paragraph whose first letter is set large and dropped into the first two, three or four lines.5 views · 6 downloads
Thread
Thread 0 posts
On LineClamp: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.