3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【CSS】要素内の文字を全選択する

Posted at

CSSの user-select: all を利用すればワンクリックするだけで要素内の文字を全選択できます。
ユーザに文字をコピーさせたい時に便利です。

実装(CSS)

p {
    user-select: all;
}

これでpタグ内の文字がどれだけ長かろうとも全選択できます。

実装(HTML)

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

補足

逆に user-select: none を利用すれば要素内の文字が一切、選択できなくなります。

参考

MDN

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?