web-dev-qa-db-ja.com

最初の文字のみを表示

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

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

私が欲しいのはテキストの最初の文字だけを表示することです（この場合はTのみ）

（実際には私はそれを使用することはありませんが、私はこれに興味があります。確かに後で役立つことがあります）

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

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

実現しないことを確認できました。質問はなぜですか？これにいくつかの回避策はありますか？

-編集-

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

サリュート

csspseudo-element
21
Toni Michel Caubet

編集：免責事項：これはコメントに従って機能しません。ニーズに合っていることを確認せずにそのまま使用しないでください。

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

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

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

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

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

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

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

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

22
TJ Koblentz

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

.Twitter {
  font-size: 0;
}

.Twitter:first-letter {
  font-size: 12px;
}
<div class="Twitter">Twitter</div>

多分これは最良の解決策ではありませんが、それは機能します。

22
Dexter_ns88

もう1つの方法は、color: transparentを使用することです

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

.Twitter:first-letter{
  color: #000;
}
<div id="socialMedia">
    <a class="Twitter">Twitter</a>
</div>

JSFiddle

ただし、これはlteIE8では機能しません。

参照：

6
Vucko

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

  
.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/

2
albert

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

これは色を使ったものです：

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;
}
2
sachleen

JavaScriptを使用して文字列を配列に分割し、配列の最初の項目を使用するのはなぜですか。またはcharAt（）

1
njsokol

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

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

デモ

HTML：

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

CSS：

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

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

結果：

http://i.imgur.com/3WeNZ55.png

1
mahemoff

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

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