Snippets Collections
p {
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}
a[href="your url here"]{
    background:red;
}
html {
  font-size: min(max(1rem, 4vw), 22px);
}

/* or */

body {
  font-size: clamp(100%, 1rem + 2vw, 24px);
}

/* with variables */

h1 {
  --minFontSize: 32px;
  --maxFontSize: 200px;
  --scaler: 10vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
star

Mon Jan 16 2023 09:32:34 GMT+0000 (UTC) https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text

#typography #css #fluid
star

Thu Dec 08 2022 12:05:43 GMT+0000 (UTC) https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

#typography #css #fluid
star

Thu Nov 17 2022 08:54:51 GMT+0000 (UTC) https://stackoverflow.com/questions/29331831/css-styling-a-link-based-on-its-href

#typography #css #fluid
star

Thu Oct 27 2022 14:08:01 GMT+0000 (UTC) https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/

#typography #css #fluid
star

Thu Oct 27 2022 13:28:14 GMT+0000 (UTC) https://css-tricks.com/simplified-fluid-typography/

#typography #css #fluid

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension