no-copy

A collection of ideas to disable text copying.

Technically, there is no way to completely disable text copying, since users can modify CSS or stop JavaScript on the client side. There are also UX concerns with disabling it.

javascript - how to restrict user to copy web content - Stack Overflow

This is just a collection of ideas and not intended to be used for serious purposes.

Change Order (CSS)

Use display: inline-flex and order: xxx

based on HTML でコピペできそうでできない要素を作る - mizchi's blog

Demo ➡

user-select: none (CSS)

The most straightforward way, used on Google's lyrics search result pages.

Demo ➡

Prevent copy Event (JavaScript)

Replace with image (HTML)

Draggable (HTML)

<section draggable="true">
  <p>~~~</p>
  <p>~~~</p>
  <p>~~~</p>
</section>

Demo ➡

When draggable="true" is set on an element that has a text, the default browser behavior (in this case, text selection) will be replaced with dragging the element. Thus, the text will not be selected.

draggable - HTML: HyperText Markup Language | MDN

However, the element can still be selected if text selection starts from other elements. This is also not a perfect solution.