"read more" techniques for css

by abbylangner

HTML

<html>

  <head>
    <title>Handy Use of white-space Property</title>
  </head>

  <body>
    <header>
      <h1>
        Dashboard
      </h1>
    </header>
    <section id="profile">
      <h2>
        Profile
      </h2>
      <img src="https://placekitten.com/100/120" />
      <p id="name">
        Sample Name Here
      </p>
      <p id="biography">
        A biography snippet that is pulled from the main profile page, Jelly-o jelly cake oat cake powder fruitcake brownie. Gummi bears wafer tiramisu icing bonbon. Tart toffee pudding shortbread chocolate cake bear claw. Chocolate bar powder carrot cake cake dessert. Toffee cake pie pudding muffin chupa chups marshmallow shortbread pie. Pastry bonbon sesame snaps cheesecake sesame snaps marzipan. Pie fruitcake liquorice fruitcake tiramisu. Macaroon donut muffin biscuit gingerbread jelly.
      </p>
      <p>
      <a href="#url-to-profile-page">View Full Profile</a>
      </p>
    </section>
    <section id="blogroll">
      <h2>
        Recent Posts
      </h2>
      <article>
        <h3>
          Sample Post 1
        </h3>
        <p>
          <a class="readmore" href="#url-to-post1">Read More</a>
          Dragée candy canes soufflé candy jujubes shortbread cookie. Chocolate bar caramels cake ice cream macaroon wafer. Lemon drops biscuit dessert marzipan ice cream. Sweet roll apple pie biscuit cake danish. Lollipop chupa chups icing cake dessert bonbon bonbon. Tiramisu muffin marshmallow brownie candy canes. Pastry croissant gummi bears tart sugar plum. Cotton candy caramels dessert cake jujubes bonbon candy jelly beans. Candy canes chocolate pastry croissant cotton candy sugar plum muffin chocolate cake ice cream.
        </p>
      </article>
      <article>
        <h3>
          Sample Post 2
        </h3>
        <p>
          <a class="readmore" href="#url-to-post2">Read More</a>
          Marzipan macaroon jelly beans lemon drops candy cupcake cotton candy jelly. Bonbon icing jelly liquorice...

CSS

:root {
  --customspacing: 4px;
}

#profile img {
  float: left;
  margin-right: var(--customspacing);
}

#name {
  font-style: italic;
}

#biography {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

section {
  clear: both; /* clear floats from nearby sections */
  padding: var(--customspacing);
}

h2 {
  margin: 10px 0px;
}

#blogroll p {
  max-height: 2rem;
  overflow: hidden;
  position: relative; /* need this on parent of absolute positioned children */
}

#blogroll .readmore {
  position: absolute;
  display: inline-block;
  bottom: 0;
  right: 0;
  padding: var(--customspacing);
  background-color: rgba(255, 255, 255, 0.8);
}