thiscodeWorks - Organizing the best of code online

List view

p {
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#typography #css #fluid

CSS Clamp

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

#typography #css #fluid

Style Link by URL

a[href="your url here"]{
    background:red;
}

#typography #css #fluid

Using calc to figure out optimal line-height

line-height: calc(2px + 2ex + 2px);

#typography #css #fluid

Simplified Fluid Typography

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) );
}

Line Clamp

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

#typography #css #fluid

CSS Clamp

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

#typography #css #fluid

Style Link by URL

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

#typography #css #fluid

Using calc to figure out optimal line-height

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

#typography #css #fluid

Simplified Fluid Typography

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

#typography #css #fluid

Line Clamp

CSS Clamp

Style Link by URL

Using calc to figure out optimal line-height

Simplified Fluid Typography

Save snippets that work with our extensions