Truncate text to a number of lines

Css

Ellipsis after two lines. The -webkit- prefixes are still required despite being supported everywhere.

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Download

Web & CSS text truncation chris

More in Web & CSS

Responsive images that do not blow the bandwidth budget Web & CSS srcset lets the browser pick; sizes tells it how wide the image will actually be rendered. A semantic, accessible form field Web & CSS The label is tied to the input by id, and the hint is announced with it via aria-describedby. Centre a box, two ways Web & CSS Grid is one line. Flex is three and gives you control over the axes separately. Visually hidden, still read aloud Web & CSS Hides a label from sight while leaving it in the accessibility tree. display:none would remove it from both. Responsive grid without media queries Web & CSS auto-fill with minmax reflows on its own, so the column count follows the container rather than a breakpoint list. Respect a reduced-motion preference Web & CSS One rule that disables animation for people who asked their system for less of it.

Random picks

Search the whole history for a string Git Finds every commit whose diff added or removed a piece of text, including in files long since deleted. Worker pool with a wait group in Go Systems Fixed number of goroutines draining a channel, with the group ensuring main waits for all of them. Null-safe chaining in Kotlin Systems ?. stops at the first null and ?: supplies the fallback, replacing a stack of if statements. Result and the question mark operator in Rust Systems ? propagates the error to the caller, which is why Rust functions rarely need explicit error branches. A README that people actually read Data Formats The order matters more than the length: what it is, how to run it, how to develop on it. Read a file into a string in Go Systems os.ReadFile replaced ioutil.ReadFile in 1.16 and is the one-liner for small files. A starting Content-Security-Policy Security Blocks inline script and restricts everything to the origin. Tighten from here rather than loosening from nothing. Records and pattern matching in Java Systems A record plus a switch pattern removes most of the ceremony this used to take.