css - 最初の文字のみを表示

Question

このマークアップを言ってみましょう:

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

私が望むのは、テキストの最初の文字だけを表示することです (この場合は T のみ)

（実際には使用しませんが、これについては興味があります。後で役立つことは間違いありません）

だからこれは私の試みでした：

#socialMedia .Twitter{
    display:none;
}
#socialMedia .Twitter:first-letter {
    display: block !important;
}

達成できないことが確認できました。質問はなぜですか？これを回避する方法はありますか？

-編集-

IE=+7/8 バージョン対応のソリューションを探しています。

サルート

score 29 · Accepted Answer

次のようなことを試してください：

.Twitter {
  font-size: 0;
}

.Twitter:first-letter {
  font-size: 12px;
}

<div class="Twitter">Twitter</div>

これは最善の解決策ではないかもしれませんが、うまくいきます。

score 25 · Accepted Answer

編集: 免責事項: コメントによると、これは機能しません。適合を確認せずにそのまま使用しないでください。

疑似要素の仕様を確認すると:first-letter、次のことがわかります。

:first-letter 疑似要素は、ブロックの最初の行の最初の文字を選択する必要があります (その行の他のコンテンツ (画像やインラインテーブルなど) が前にない場合)。

ここで重要な言葉は「ブロック」です。

<a/>のクラスのタグで疑似要素を使用しようとしていますTwitter。デフォルトでは、アンカータグはインライン要素です (ブロックレベル要素ではありません)。

特定のマークアップについて、問題の解決策の 1 つは、アンカーを次のようにスタイルすることです。

.Twitter {
    display:block;
    visibility:hidden;
}

.Twitter:first-letter {
    visibility:visible;
}

あなたが何をしようとしているのか正確にはわかりませんが、実験目的には十分です。ここでデモをチェックしてください: http://jsfiddle.net/H7jhF/。

score 2 · Accepted Answer

あなたがやっていることは、親要素を隠してその子の 1 つを表示しようとするようなものですが、親のスタイルがそれをオーバーライドするため、うまくいきません。また、親要素が機能するためには、ブロックレベルの要素である必要があります。divまたはpタグのように、またはタグdisplay: block;にa。

色を使用したものは次のとおりです。

HTML

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

CSS

body {
  background-color:#FFF;
}
.Twitter{
    display: block;
    color:#FFF;
}
.Twitter:first-letter {
    color:#000;
}

score 2 · Accepted Answer

ページからコンテンツを撮影し、動的コンテンツを使用して手紙を表示します。

  
.twitter{
    text-indent:-9999px;
    display:block; 
    position:relative;
}
.twitter:before,.twitter::before{
    content:"T";
     position:absolute;
    width:10px;
    height:15px;
    z-index:100; 
    text-indent:9999px;
}

このフィドルで遊んでいる：
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/

score 1 · Accepted Answer

純粋な CSS の回答では、可視性と色のトリックを使用して残りの文字を非表示にしていますが、それらは依然として存在し、レイアウトに影響を与えています。たとえば、要素をフロートさせてその横に何かを置きたい場合など、レイアウトの問題が発生する可能性があります。

隠し要素なしでこれを行う面白い方法を見つけました。秘訣は、単語全体をほとんど何もない状態に縮小してから、最初の文字だけを爆破することです。display: noneOPがやろうとしていたことに少し似ていますが、内部のすべてをシャットダウンするのではなく、連続スペクトルで動作しているため機能します. (一種のアナログ > デジタルの状況。)

デモ

HTML:

<div>Ding Dong</div> and other stuff

CSS:

div {
  font-size: 0.0000016px;
  float: left;
}

div::first-letter {
  color: red;
  font-size: 10000000em;
}

結果：

score 1 · Accepted Answer

JavaScript を使用して文字列を配列に分割し、配列の最初の項目を使用してみませんか。または charAt()

score 0 · Accepted Answer

これが私がすることです：

.Twitter{
        display:block;
        width:1ch;
        overflow:hidden;
        white-space: nowrap;
    }

css - 最初の文字のみを表示

8 に答える 8

Related

Reference