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

Рейтинг: 0Ответов: 1Опубликовано: 19.03.2015

Можно ли на голом CSS решить поставленную задачу? Предположительный вариант был:

strong::first-letter { display:inline; }
strong { display:none; }

Но он не сработал. Это вообще можно провернуть в чистом виде?

Обновление

Есть текст, оформленный в цветной продольной рамочке. Надо средствами голого CSS оставить вместо прямоугольника с текстом маленький кружочек с первой буквой этого самого текста. Круг из прямоугольника сделать — не вопрос, а вот от текста одну букву оставить...

Варианты типа «обработать яваскриптом» или «повлиять на вывод» не рассматриваются.

Можно рассмотреть вариант — оставить вместо строчки UTF-8 символ. Но опять же, на CSS, не трогая вёрстку, так разве можно?

css вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 3Принят
  1. Псевдокласс :first-letter применяется только к блочным элементам, например, p, div, а также к элементам, у которых значение display задано как inline-block, table-caption или table-cell.
  2. Допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.

UPD.

Доработал вариант @Crus до работающего примера:

div {
    font-size: 12px;
    height: 50px;
    width: 50px;
    overflow: hidden;
    color: #fff;
}
div:first-letter { 
    font-size: 18px; 
    line-height: 50px;
    border-radius: 50px;
    padding: 10px 17px;
    border: 1px solid #ccc;
    color: #000;
}