Рамка вокруг каждой буквы в тексте?

Добрый день.
Ситуация такая, есть текст и нужно каждую букву поместить в рамку, что бы было примерно как на скриншоте. Пока ничего толкового в голову не пришло. Подскажите пожалуйста, как можно решить эту задачу?
4331d5f2ab894547a10986c221a572bd.png
  • Вопрос задан
  • 4497 просмотров
Пригласить эксперта
Ответы на вопрос 5
aen
@aen
Keep calm and 'use strict';
Для каждой буквы заводите отдельный контейнер, затем для него рисуйте рамку.
Если надо это делать автоматически, то логика будет простейшая. Получили строку, сделали сплит по буквам, каждую обернулись в . Потом сделали джойн. Полученную строку вставили на место исходной.
Ответ написан
Комментировать
Как-то так jsfiddle.net/smb9gk0a
Ответ написан
Комментировать
Комбайн с использованием js и css - jsfiddle.net/empdxa5x по мотивам @aen

Ну а теперь как плагин. Что то у меня сильно хорошее настроение..
Ответ написан
ZoolooS
@ZoolooS
ZoolooS
либо каждый символ заворачивать во что-то типа < span > и ему назначать стили с рамками, либо выбрать моноширинный шрифт и подложить под него рисунок соответствующих габаритов с "рамками".
Ответ написан
Комментировать
@ssclock
Средствами CSS: наложить текст оверлеем на слой с рамками (по диву на символ или моноширинным текстом), рамки можно поискать среди графических символов в UTF-8 и, т.о., сделать код минимальным.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы