Пунктирные линии в Chrome

По какой-то причине при использовании стиля пунктирной границы для создания линии Chrome отображает концы в виде двойных точек, что выглядит ужасно, особенно на коротких линиях:

.text {
  border-bottom: 2px dotted #000;
}
<span class="text">Hi</span><br/>
<span class="text">lll</span><br/>
<span class="text">22</span><br/>

Даже такая простая вещь, как border-bottom: 2px dotted #000;, не работает. Я видел, что в какой-то статье предлагается сделать левые/правые границы прозрачными, но это выглядит еще хуже, потому что обрезает маленькие углы точек.

Однако в Firefox это выглядит нормально. Есть ли способ заставить его выглядеть так же хорошо в Chrome, или мне не повезло?


css border dotted-line
person riv    schedule 26.07.2017    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы можете абсолютно разместить псевдоэлемент со свойствами границы и сместить позицию на ширину «точки», чтобы скрыть первую и последнюю точки, которые отображаются как двойные точки.

.text {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.text::after {
  border-bottom: 2px dotted #000;
  content: '';
  position: absolute;
  bottom: 0; left: -2px; right: -2px;
}
<span class="text">Hi</span><br/>
<span class="text">lll</span><br/>
<span class="text">22</span><br/>

person Michael Coker    schedule 26.07.2017
comment
Спасибо, это должно сработать, если предположить, что проблемы только на концах. - person riv; 26.07.2017
comment
На самом деле, inline-block портит вертикальное выравнивание, если вы помещаете любой другой текст в ту же строку, это работает лучше vertical-align: bottom, но я не уверен, какие еще побочные эффекты могут быть. - person riv; 26.07.2017
comment
@riv всегда пожалуйста. vertical-align: bottom должен позаботиться об этом. - person Michael Coker; 26.07.2017

arrow_upward
0
arrow_downward

Если вы хотите установить только нижнюю границу, почему бы не попробовать text-decoration:underline,

затем установите text-decoration-style:dotted

См. этот https://developer.mozilla.org/id/docs/Web/CSS/text-decoration-style

person Luki Centuri    schedule 26.07.2017
comment
Точно такая же проблема в Chrome, и подчеркивание касается текста, что еще хуже. Плюс совместимость хуже. - person riv; 26.07.2017