Kullanıcı-kopyasını hala kopyaya kopyala

Question

Sadece CSS'nin user-select özniteliğini keşfettim. İnsanların görüntülenen sonuçları bir sayfaya kopyalamaya gerek kalmadan, başlıkları da kopyalamaya gerek kalmadan (ve diğer birkaç şeyden) bir yol bulmak istedim. Her tarayıcı, bir şey seçmeye çalışırken biraz farklıdır. Ancak esasen Chrome’da test ediyorum. Fiddle Code

HTML

<div> 
    <span class="no-select heading">Heading 1 - can't select it</span> 
    <p>This text you can select & copy.</p> 
    <span class="no-select heading">Heading 2 - can't select it</span> 
    <p>This text you can select & copy.</p> 
</div> 

CSS

.no-select { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -moz-user-select: -moz-none; 
    -ms-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 

sonuçları: onlar sadece vurgulanan metni kopyalamak mümkün olacaktır gibi

Bana göre görünüyor. Bununla birlikte, neyin vurgulandığı kopyalanırken - heading 2, ancak heading 1 kopyalanmadı. Bu neden?

This text you can select & copy. 

Heading 2 - can't select it 
This text you can select & copy. 

Answer 1

Gerçekten onun tüm bu şaşırtıcı, user-select mülkiyet bir elemanların içeriği seçerek bir kullanıcıyı engellemek için olduğunu sanmıyorum. Basic UI Module'un hiçbir yerinde, kopyalama içeriği ile ilgili davranıştan bahsedilmiyor. Bunun farklı tarayıcılarda varyasyonlar olduğunu düşünürdüm.

MDN da belirtmektedir:

seçim görünümünü, (sadece) kontrol eder. Bunun gerçek seçim işlemi üzerinde herhangi bir etkisi yoktur.

Bu WebKit Bugzilla raporundaki yorumlar da aynı şeyi söylüyor.

Answer 2

Aynı problem vardı ve aşağıdaki çözümü buldum. https://danoc.me/blog/css-prevent-copy/

html:

<p data-pseudo-content="Lorem Ipsum"></p> 

css: bunu seçemezsiniz eğer varsayılabilir

[data-pseudo-content]::before { 
    content: attr(data-pseudo-content); 
}