Установить полную нижнюю границу для разрыва строки при использовании тега span в html

Question

Я хочу установить подчеркивание для предложения, но когда оно слишком длинное с шириной экрана, оно будет разбивать строку на большее количество строк, а пробелы не будут подчеркиваться как красная линия на рисунке ниже. Так как же установить подчеркивание для всего пробела?

Мой пример кода здесь: https://jsfiddle.net/hoanghoang3009/z5vjb3wf/

div>span {
  padding-bottom: 10px;
  border-bottom: 0.5px dashed #b4987e;
  line-height: 48px;
}

<div>
  <span>
        Xin chao tat ca moi nguoi, toi dang test thu gach duoi cua dong nhung chua thanh, cong. Neu thanh cong duoc thi qua thuc toi rat vui, va cam on tat ca so giup do cua moi nguoi.
      </span>
</div>

Answer 1

Сделайте это с фоном на элементе div вместо этого. Вы также сможете лучше контролировать тире.

.box {
  line-height: 48px;
  background:
    /* a white overlay to show only 1px from the border */
    repeating-linear-gradient(to bottom,#fff 0 47px,transparent 0 48px /*the same value as line-height*/), 
    /*the dashed border  */
    repeating-linear-gradient(to right,#b4987e 0 2px,transparent 0 4px);
}

<div class="box">
  <span>
    Xin chao tat ca moi nguoi, toi dang test thu gach duoi cua dong nhung chua thanh, cong. Neu thanh cong duoc thi qua thuc toi rat vui, va cam on tat ca so giup do cua moi nguoi.
  </span>
</div>

Чтобы иметь прозрачность, вы можете рассмотреть маску, как показано ниже:

.box {
  line-height: 48px;
  position: relative;
  z-index:0;
}

.box:before {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(to right, #b4987e 0 2px, transparent 0 4px);
  -webkit-mask: repeating-linear-gradient(to bottom, transparent 0 47px, #fff 0 48px);
          mask: repeating-linear-gradient(to bottom, transparent 0 47px, #fff 0 48px);
}
body  {
  background:yellow;
}

<div class="box">
  <span>
    Xin chao tat ca moi nguoi, toi dang test thu gach duoi cua dong nhung chua thanh, cong. Neu thanh cong duoc thi qua thuc toi rat vui, va cam on tat ca so giup do cua moi nguoi.
  </span>
</div>

Answer 2

Существует простой способ решения вашей проблемы.

В родительском элементе используйте overflow-y: hidden и установите для него border-bottom .

И используйте position: relative в дочернем элементе

А также для заполнения текста на всю ширину родительского элемента используйте text-align: justify, как в примере ниже:

        div{
            overflow-y: hidden;
            padding-bottom: 10px;
            border-bottom: 0.5px dashed #b4987e;
            text-align: justify;
        }
        div> span{
            padding-bottom: 9px;
            border-bottom: 0.5px dashed #b4987e;
            line-height: 45px;
            position: relative;
            top: 15px;
        }

<div>
      <span>
            Xin chao tat ca moi nguoi, toi dang test thu gach duoi cua dong nhung chua thanh, cong. Neu thanh cong duoc thi qua thuc toi rat vui, va cam on tat ca so giup do cua moi nguoi.
      </span>
</div>