CSSで最初の文字以外のすべてのテキストを非表示にしますか？

Question

CSSで最初の文字の後にすべての文字を隠すことはできますか？

dt:not(::first-letter) { 
    display: none; 
} 

Answer 1

あなたのCSSは間違っています。以下のバージョンが動作します（少なくともChromeでは）。これはdtを見えなくし、最初の文字を覆い隠して再び見えるようにします。

displayでも同じことを試しましたが、期待通りに動作しません。 visibility: hiddenは内容を隠しますが、要素をそのまま保持しますが、display: noneはそれをフローから削除し、サブ要素（この場合は最初の文字）が再び表示されるようにします。

私はホバーを追加しました。あなたはdtの残りを見るために手紙をホバーすることができます。

dt { 
 
    visibility: hidden; 
 
} 
 
dt::first-letter { 
 
    visibility: visible; 
 
} 
 

 
/* Hover the first letter to see the rest */ 
 
dt:hover { 
 
    visibility: visible; 
 
}

Hover to see the rest: 
 
<dt>Lorum ipsum is a weird text</dt> 
 
<dt>Foo bar</dt>

副作用は、テキストで覆われている面積は、まだ請求されていることになります。たぶんそれは問題ではないかもしれませんが、そうであれば他の解決策が必要になります。 1つの可能性は、dt0のフォントサイズを作成することです。そうすれば、テキストは非常に小さくなり、スペースは不要です。もちろん画像も含まれていれば助けにならないでしょう。

これはうまくいかないので、ここではfont-sizeを使用する方法があります。理想的ではありませんが、うまくいけばそれでもあなたの問題は解決します。

Answer 2

これを試してみてください

dt { 
 
    font-size: 0; 
 
} 
 
dt::first-letter { 
 
    font-size: 1rem; 
 
} 
 

 
/* Hover the first letter to see the rest */ 
 
dt:hover { 
 
    font-size: 1em; 
 
}

Hover to see the rest: 
 
<dt>Lorum ipsum is a weird text</dt> 
 
<dt>Foo bar</dt>

....

.newline1::first-letter { 
 
    font-size: 200%; 
 
    color: #8A2BE2; 
 
} 
 
.newline2::first-letter { 
 
    /*color: transparent;*/ 
 
font-size: 0px; 
 
}

<div class="newline1"> 
 
Test Stackoverflow.com 
 
</div> 
 
<div class="newline2"> 
 
Test Stackoverflow.com 
 
</div>

.newline1::first-letter { 
 
    font-size: 200%; 
 
    color: #8A2BE2; 
 
} 
 
.newline2::first-letter { 
 
    color: transparent; 
 
}

<div class="newline1"> 
 
Test Stackoverflow.com 
 
</div> 
 
<div class="newline2"> 
 
Test Stackoverflow.com 
 
</div>

Answer 3

私は、Cだと思います

.twitter{ 
 
     display: block; 
 
     color: transparent; 
 
    } 
 

 
    .twitter:first-letter{ 
 
     color: #000; 
 
    }

<div id="socialMedia"> 
 
    <a class="twitter">Twitter</a> 
 
</div> 
 
<div id="socialMedia"> 
 
    <a class="twitter">Google</a> 
 
</div>

も参照してください。このfiddle

Answer 4

あなたは（thisを参照）擬似要素セレクタと:notを使用することはできません：このしてみてください。

あなたができることは、別の方法で考えることです：全体を透明にしてから、::first-letterで色付けします。後者は特異性が高いため、透明な設定を上書きして、結果を得られます。

Answer 5

代わりに、Warunaの答えに基づいて、レイアウトベースの属性の代わりにcolorを使用します。主な利点は、テストしたすべてのブラウザ（Firefox、Chrome、M $ Edgeでは動作しますが、おそらくすべてのブラウザで動作するはずです）でも動作し、視覚的グリッチは発生しません（第2の解決策それは完全に視覚的な属性を使用するためです）。

元のCSSの問題点は、の:notの内部に疑似要素（::blah）を使用できないことです。あなたがFirefoxの上で動作していないよう:not

dt { 
 
    color: transparent; 
 
} 
 
dt::first-letter { 
 
    color: black; 
 
} 
 

 
/* For testing */ 
 
dt:hover { 
 
    color: black; 
 
}

<dt>Hello World!</dt>