Межбуквенный интервал CSS вместе со сквозной строкой
Есть ли какое-нибудь решение css/js, как провести центральную линию через текст при использовании letter-spacing? В то время как однострочный текст можно выполнить по центру line-through благодаря псевдоэлементу ::before или ::after, но это невозможно для блочных элементов, таких как <p> или <div>.
h2, p {
letter-spacing: 1em;
text-decoration: line-through;
text-align: center;
}
p {
letter-spacing: .5em;
}<h2>Random text</h2>
<p>Lorem ipsum dolor sit amet, at nemore aperiri cum. Regione honestatis ei quo, ne eos aliquid mediocrem, ne viris quodsi epicuri vel. Ex dolorem atomorum dissentiunt nam, iudico minimum cotidieque eum et, has novum mnesarchum id. Libris blandit liberavisse mei in. Ius viris posidonium ei, ut quas viris albucius eum, mei eu indoctum reformidans. Et usu sumo invidunt, cu vix veri dolore propriae.</p>Но вы действительно ищете решение для js? До какой степени? Я имею в виду, что любое js-решение должно лучше понимать ваш макет, например, это исправлено или могут ли разрывы меняться при изменении размера, динамической вставке элементов, наведении курсора и т. д.?
Я также принимаю решение js. div/p со сквозной строкой может содержать другой html, например ul, a, i, поэтому в решении JS каждая текстовая строка должна быть заключена в span/div и прослушивать событие window.resize.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот идея, в которой вы можете полагаться на фон и коробка-украшение-брейк для создания сквозной линии, и вы можете легко настроить ее размер и положение. Вы в основном удалите один интервал между буквами из общей ширины.
Важно отметить, что фон необходимо применять к встроенному элементу:
p {
letter-spacing: .5em;
text-align:center;
}
p span {
background:
linear-gradient(#000,#000) /* Coloration */
0 calc(50% + 0.2ex) /* position */
/
calc(100% - .5em) 1px /* width height */
no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}<p><span>Lorem ipsum dolor sit amet, at nemore aperiri cum. Regione honestatis ei quo, ne eos aliquid mediocrem, ne viris quodsi epicuri vel. Ex dolorem atomorum dissentiunt nam, iudico minimum cotidieque eum et, has novum mnesarchum id. Libris blandit liberavisse mei in. Ius viris posidonium ei, ut quas viris albucius eum, mei eu indoctum reformidans. Et usu sumo invidunt, cu vix veri dolore propriae.</span></p>нет времени проверять, что происходит, но на FF кажется, что сглаживание делает вещи нечеткими: i.stack.imgur.com/qG29A.png
@Kaiido да, из-за небольшого значения высоты (0,1 em) и, поскольку это не тот же шрифт, значение не будет таким же, и у нас будет проблема с субпиксельным рендерингом, я думаю
@Kaiido Я переключился на значение в px, это более безопасно ... нам нужно изменить его вручную, если мы увеличим размер шрифта
На сегодняшний день лучшее «умопомрачительное» решение, которое работает в любом интеллектуальном браузере. Согласно caninuse box-decoration-break недоступно в Edge (IE).
Очень мило (придирка: правило без префикса должно идти после -webkit-prefixed)
связанные: stackoverflow.com/questions/4015263/…