Отображать только первую букву

Давайте скажем эту разметку:

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

Я хочу только видеть первую букву текста (в данном случае только T)

(На самом деле я не буду использовать его, но мне это интересно, уверен, может быть полезно позже)

Итак, это была моя попытка:

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

Я смог проверить, что он этого не достигнет. Вопрос в том, почему? и есть ли какая-то работа вокруг этого?

-Edit -

Мы ищем решения с поддержкой IE = + 7/8.

Salut

Ответ 1

Изменить: Отказ от ответственности: это не работает в соответствии с комментариями. Пожалуйста, не используйте как есть, не проверив его в соответствии с вашими потребностями.

Если вы проверите спецификацию псевдоэлемента :first-letter, вы заметите следующее:

Псевдоэлемент первой буквы должен выбрать первую букву первой строки блока, если ей не предшествует какой-либо другой контент (например, изображения или встроенные таблицы) на его строке.

Важным словом здесь является "блок".

Вы пытаетесь использовать псевдоэлемент в теге <a/> с классом Twitter. По умолчанию теги привязки являются встроенными элементами (а не элементами уровня блока).

Для вашей данной разметки одним из решений вашей проблемы будет создание стиля якоря следующим образом:

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

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

Я не уверен, что вы собираетесь делать, но это достаточно хорошо для экспериментальных целей. Посмотрите демо здесь: http://jsfiddle.net/H7jhF/.

Ответ 2

Попробуйте что-то вроде этого:

.Twitter {
  font-size: 0;
}

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

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

Ответ 3

Другой способ - использовать color: transparent

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

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

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

Ответ 4

То, что вы делаете, похоже на скрытие родительского элемента и попытку показать одного из его дочерних элементов, это не сработает, потому что родительский стиль переопределяет его. Родительский элемент также должен быть элементом уровня блока, чтобы он работал. Как тег 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;
}

Ответ 5

Чистые ответы CSS используют видимость и цветовые трюки, чтобы скрыть оставшиеся буквы, но они все еще присутствуют и влияют на макет. Это может вызвать проблемы с компоновкой, например. если вы хотите поплавать с элементом и поместить что-то рядом с ним.

Я нашел забавный способ сделать это без скрытых элементов. Трюк состоит в том, чтобы сжать все слово до почти ничего, а затем взорвать только первую букву. Он немного похож на OP, но он работает, потому что он работает на непрерывном спектре, а не display: none, который просто закрывает что-либо внутри него. (Вид аналоговой > цифровой ситуации.)

Демо

HTML:

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

CSS

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

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

Результат:

Ответ 6

снимите содержимое с страницы и покажите письмо с использованием динамического содержимого:

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

Ответ 7

Почему бы просто не использовать JavaScript и не разделить строку на массив и использовать первый элемент в массиве. Или charAt()

Ответ 8

Вот что я делаю:

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