Возможно ли сделать кроссбраузерное text-decoration dotted?

Question

[Денис Князев]

Здравствуйте, возник такой вопрос:

как можно добиться точечного подчеркивания как на рисунке 1. во всех браузерах ?

• Есть свойство стиля для подчеркивания, но оно возможно только в мозилле caniuse.com/#feat=text-decoration
  
• Можно было бы делать border-bottom dotted, но к сожалению у меня динамический многострочный текст.
  
• Как вариант, можно чисто теоретически с помощью js разбивать текст на строки и добавлять border-bottom dotted, но может есть какой-то менее костыльный вариант ?
  

Рис 1.

Спасибо

Comments

[Матвей Мамонов]

Вряд ли. Это, пожалуй, единственное свойство (не считая border), позволяющее подчеркнуть что-то точечной линией.

Answer 1

[Ankhena]

codepen.io/anon/pen/rLpWPE ?

Comments

[Денис Князев]

еще раз пересмотрел, что я делал и нашел ошибку как раз со стилями внутреннего span. Спасибо большое!

[Антон Тихомиров]

А в чем была ошибка, если не секрет?

[Ankhena]

Антон Тихомиров: наверное, он был блочным

[Денис Князев]

Ankhena Антон Тихомиров там образовывается дилемма: мне нужно регулировать высоту строки и нужно такое подчеркивание ( а чтобы регулировать line-height - нужен inline-block , или block , но если поставить его, подчеркивание уйдет вниз блока только )

[Антон Тихомиров]

Денис Князев: о да, есть такое... Ну а все-таки разобрались? Там действительно нужно было банально width блоку задать, при этом line-height должно работать. Во всяком случае ни разу не сталкивался с какими-либо странностями в работе line-height...

Answer 2

[Сергей delphinpro]

https://jsfiddle.net/e2zy13mq/