Как каждую букву в слове заключить в рамку?

Question

[Georg]

Добрый день.
Можно ли как-то на css заключить каждую букву в слове в рамку? Как в официальных документах. См картинку:

Answer 1

[riot26]

https://jsfiddle.net/riot26/woxf8yxt/

Comments

[Pretor DH]

Нафига JS?

[riot26]

Pretor DH: вот нафига. Шрифты в разных браузерах на разных ОСях рендерятся по-разному.

[riot26]

Pretor DH: этобыло в лисе. В хроме всё ок https://i.imgur.com/jFa0jlO.png

[Pretor DH]

У меня во всех браузерах всё норм. Но если боитесь можно в пикселях выставить размерности.

[riot26]

Pretor DH: если бы все верстальщики говорили "У меня во всех браузерах всё норм", в интернетах царил бы хаос :)

[Pretor DH]

Я к тому, что быстрая проверка глюка не показала.

Answer 2

[profesor08]

Заключить в рамку можно. На CSS заключить буквы в рамку нельзя.
Можно сделать на JavaScript: codepen.io/Profesor08/pen/xOBwyg
Можно генерировать движком сайта.
И в каждом случае, придется каждую букву пихать в отдельный тэг.

Answer 3

[Pretor DH]

Выставить моноширинный шрифт, и растояние между буквами.
Фоном поставить полоски или квадраты.

Решение Jsfiddle

Comments

[Максим]

я не автор вопроса , но хочешь я приведу пример? : нужен именно такой результат

[Georg]

Количество символов в фразе меняется

[Pretor DH]

Ну и что... посмотри jsfiddle

[Georg]

Pretor DH: виноват, смотрел не внимательно

Answer 4

[Jura Semenenko]

<p><span class='doc'>И</span><span class='doc'>Н</span><span class='doc'>Н</span></p>

.doc {
	display: inline-block;
	border: 1px solid black;
	padding: 0px;
}

codepen.io/sem9ndos/pen/jAJbzR

Если я правильно понял вопрос...

Comments

[Максим]

это тапорное решение , нужен массив на js

[Georg]

Да, работает, но можно ли так, чтобы не обрамлять каждую букву в тег?

[Jura Semenenko]

Georg: я такого способа средствами CSS не знаю.