Skip to content

Instantly share code, notes, and snippets.

@felipegenuino
Created March 27, 2020 12:57
Show Gist options
  • Save felipegenuino/f5f0937ffc407eeff45ca9879511719e to your computer and use it in GitHub Desktop.
Save felipegenuino/f5f0937ffc407eeff45ca9879511719e to your computer and use it in GitHub Desktop.
Line Clamping (Cross-Browser, Pure CSS)
<p class="line-clamp line-clamp-2">This is a cross-browser (pure CSS) solution that will clamp text to X number of lines with a trailing ellipsis in Webkit browsers. The `height` property is used on other browsers (along with a fading text effect) as a graceful fallback in non-Webkit browsers. The use of CSS `calc` allows for any font-size to work properly; i.e. you don't need a fixed height or a fixed font size for this to work! Play with it :-) You can change the second class to `line-clamp-[1|2|3|4|5]` and experiment with this just a little.</p>
body, html{
width: 100%;
height: 100%;
background: #f8f8f8;
margin: 0;
padding: 0
}
body{
}
.pai{
display: flex;
width: 100%;
flex-direction: row
}
.filhoA{
display: flex;
background: #00ff0030;
width: 200px;
min-width: 200px;
}
.filhoB{
width: 100%;
display: flex;
flex-direction: row;
width: 100%;
background: #ff000030;
padding: 10px;
position:relative;
.neto1{
flex: 0 1 calc(100% - 300px);
padding: 10px;
max-width: 100%;
background: #0000ff30;
position: relative;
}
.netoclone{}
.neto2{
flex: 0 0 300px;
padding: 10px;
max-width: 300px;
background: #0000ff20;
right: 0;
position: relative;
div{
transition: all 0.2s linear;
position: absolute;
right: 0px;
top: 0;
background: red;
height: 100%;
width: 300px;
// width: calc(100vw - 220px);
overflow-y: hidden;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment