natevw/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This fades the bottom of an element away when its content overflows. This seems a bit simpler way of accomplishing what http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ did, although it requires calc support to work.

  
## index.html
<!doctype html>
<html><head>
  <meta charset="utf-8">
  <title>Fade test</title>
  <style>
    div {
      /* this is the main box we're filling */
      min-height: 1em;
      max-height: 3em;
      width: 55px;

      /* DISPLAY EXTRAS */
      margin: 8px;
      display: inline-block;
      vertical-align: top;
      line-height: 1em;
      overflow: hidden;
    }
    span {
      /* this wrapper is key — it gives us access to the total height of the text */
      position: relative;
      display: block;
    }
    span::after {
      content: "";
      display: block;
      box-shadow: inset 0 -1em 1em -0.25em white;

      position: absolute;
      width: 100%;
      /* here's the magic — height gets clamped between 0 and 1em… */
      max-height: 1em;
      height: calc(100% - 3em);
      /* …and */
      bottom: calc(100% - 3em);
    }

    #debug {
      display: block;
      font-family: monospace;
      text-decoration: none;
    }
    #debug:focus {
      width: 0; height: 0;
      white-space: nowrap;
    }
    #debug::before {
      content: "- ";
    }
    #debug:focus::before {
        content: "X ";
    }
    #debug:focus ~ div {
      overflow: visible;
      box-sizing: border-box;
      border: 1px solid red;
      margin-top: 1.3em;
    }
    #debug:focus ~ div span::after {
      box-sizing: border-box;
      border: 1px solid rgba(0,0,255,0.1);
      background: rgba(0,255,0,0.2);
    }
  </style>
</head><body>
  <a id=debug href="#" onclick="return false;">Debug</a>
  <div><span></span></div>
  <div><span>Test short.</span></div>
  <div><span>Test three lines.</span></div>
  <div><span>Test a whole bunch of lines.</span></div>
  <div><span>Test an even longer bunch of lines.</span></div>
</body></html>
	<!doctype html>
	<html><head>
	<meta charset="utf-8">
	<title>Fade test</title>
	<style>
	div {
	/* this is the main box we're filling */
	min-height: 1em;
	max-height: 3em;
	width: 55px;

	/* DISPLAY EXTRAS */
	margin: 8px;
	display: inline-block;
	vertical-align: top;
	line-height: 1em;
	overflow: hidden;
	}
	span {
	/* this wrapper is key — it gives us access to the total height of the text */
	position: relative;
	display: block;
	}
	span::after {
	content: "";
	display: block;
	box-shadow: inset 0 -1em 1em -0.25em white;

	position: absolute;
	width: 100%;
	/* here's the magic — height gets clamped between 0 and 1em… */
	max-height: 1em;
	height: calc(100% - 3em);
	/* …and */
	bottom: calc(100% - 3em);
	}

	#debug {
	display: block;
	font-family: monospace;
	text-decoration: none;
	}
	#debug:focus {
	width: 0; height: 0;
	white-space: nowrap;
	}
	#debug::before {
	content: "- ";
	}
	#debug:focus::before {
	content: "X ";
	}
	#debug:focus ~ div {
	overflow: visible;
	box-sizing: border-box;
	border: 1px solid red;
	margin-top: 1.3em;
	}
	#debug:focus ~ div span::after {
	box-sizing: border-box;
	border: 1px solid rgba(0,0,255,0.1);
	background: rgba(0,255,0,0.2);
	}
	</style>
	</head><body>
	<a id=debug href="#" onclick="return false;">Debug</a>
	<div><span></span></div>
	<div><span>Test short.</span></div>
	<div><span>Test three lines.</span></div>
	<div><span>Test a whole bunch of lines.</span></div>
	<div><span>Test an even longer bunch of lines.</span></div>
	</body></html>