reverse-ellipsis

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h2>Reverse ellipsis example</h2>
    <div>
      <div class="box  ellipsis  reverse-ellipsis">
        <div class="ellipsis__content">Here is some long content that doesn't fit.</div>
      </div>
    </div>

  </body>

</html>

// Code goes here

/* Styles go here */

.box {
/*   width: 220px; */
  border: 1px solid silver;
  /* padding: 0 0 0 0; */
  /* margin: 0; */  
  /* background-color: lightskyblue; */
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: lightgreen;
  /* padding: 0 0 0 0; */
}

.reverse-ellipsis {
  /* Your move. */
  text-overflow: initial;
  line-height: 1.35;
  /* padding-top: 0; */
  /* padding: 0 0 0 0; */
}

.ellipsis__content {
  float: right;
  min-width: 100%;
  /* margin-top: 1em; */
  margin-left: -1px;
  /* padding: 0 0 0 -1px; */
}

.reverse-ellipsis:after {
  content: "…";
  float: left;
  width: 1em;
  padding: 0px 1px 0 1em;
  margin: -1.35em -1em;
  background: #FFF;
}