<div class="container">
  <section>
    <h4>The following paragraph can be highlighted.</h4>
    <p title="Try highlighting me!">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dolor risus, semper nec velit et, aliquam rhoncus nisl. Integer justo magna, efficitur a lacus a, rutrum dapibus odio. Vestibulum interdum diam vitae sagittis tincidunt. Aliquam ligula mi, cursus et gravida nec, facilisis eget lectus. Suspendisse et nulla a dui ultrices condimentum id pellentesque elit. Aliquam vitae commodo mauris. Mauris fermentum volutpat ligula sit amet tincidunt. Phasellus venenatis nulla sed est convallis euismod. Sed a velit id nisl varius condimentum ut sed nibh.</p>
  </section>
  <section>
    <h4>The following paragraph cannot be highlighted.</h4>
    <p class="no-highlight" title="Try highlighting me!">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nisl efficitur nisi venenatis sagittis sit amet ut nisl. Duis faucibus vel quam ut scelerisque. Nunc tellus felis, pellentesque a urna et, condimentum consectetur velit. Proin vel metus vel mi cursus viverra vitae eget dui. Donec imperdiet convallis massa nec congue. Sed facilisis libero in tincidunt efficitur. Donec eu lacus aliquet, rutrum nibh a, viverra lorem. Sed tellus purus, scelerisque at felis ut, sodales facilisis eros. Quisque dapibus felis vel velit pretium placerat.</p>
  </section>
</div>
body {
  height: 100vh;
  display: grid;
  place-items: center;
  font-family: Arial, sans-serif;
}

.container {
  width: calc(100% - 9rem);
}

.no-highlight {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.