Truncate
Text kept to one line and cut with an ellipsis at the end or the middle, with the whole text in its title.
Demo
A very long name for a file that will not fit in the space it is given, so it is cut.pdf
A very long name for a file that will not fit in the space it is given, so it is cut.pdf
Short enough to show wholeIn a sentence: A very long name for a file that will not fit in the space it is given, so it is cut.pdf was uploaded.
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/truncate.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/truncate.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/truncate.qwe
let truncate_demo_long = "A very long name for a file that will not fit in the space it is given, so it is cut.pdf"view TruncateDemo() = <div.demo-stack> <div style="width: 260px; border: 1px dashed var(--ui-border); padding: 8px; border-radius: var(--ui-radius-sm)"> <Truncate text={truncate_demo_long} id="truncate-demo-end"/> </div> <div style="width: 260px; border: 1px dashed var(--ui-border); padding: 8px; border-radius: var(--ui-radius-sm)"> <Truncate text={truncate_demo_long} keep={7} id="truncate-demo-mid"/> </div> <Truncate text="Short enough to show whole" width="260px" id="truncate-demo-short"/> <p.demo-note>In a sentence: <Truncate text={truncate_demo_long} width="160px" id="truncate-demo-inline"/> was uploaded.</p> </div>Source
ui/truncate.qwe
// Truncate: text kept to one line, cut with an ellipsis where there is no room, with// the whole text in its title (shown on hover) and still there for screen readers.//// <Truncate text={file.name}/>// <Truncate text="quarterly-report-final-v3.xlsx" keep={5} width="180px"/>//// text: the text. keep: how many characters at the end to keep in view (an extension,// a number), the cut then being in the middle. width: a CSS max-width; without one// it fills its container, which must have a width (a flex child needs min-width: 0).// tag: "span" (default) or "div". id: the element's id.import ui/theme.qwe use ui_clslet truncate_css = css`.ui-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }span.ui-truncate { display: inline-block; vertical-align: bottom; }.ui-truncate-mid { display: flex; }span.ui-truncate-mid { display: inline-flex; }.ui-truncate-head { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.ui-truncate-tail { flex: none; white-space: nowrap; }`view Truncate(text: str, keep: int = 0, width: str? = null, tag: str = "span", id: str? = null, class: str? = null) { style global truncate_css let n = len(text) let mid = keep > 0 && keep < n let cls = ui_cls(["ui-truncate", mid && "ui-truncate-mid", class]) let style = width != null ? `max-width: ${width}` : null let body = mid ? [<span.ui-truncate-head aria-hidden="true">{slice(text, 0, n - keep)}</span>, <span.ui-truncate-tail aria-hidden="true">{slice(text, n - keep, n)}</span>, <span.ui-sr>{text}</span>] : text tag == "div" ? <div class={cls} id={id} title={text} style={style}>{body}</div> : <span class={cls} id={id} title={text} style={style}>{body}</span>}Related
LineClampText cut after N lines with an ellipsis, with the whole text in its title.4 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 · 6 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 · 7 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 Truncate: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.