Соединить текст, находящийся в нескольких тэгах

у меня возникла проблема.

Объясню словами: у меня есть 3 тэга с названиями: before-focus, now-in-focus and after-focus. Мне нужно содержимое этих 3 тэгов объединить в одно слово, чтобы оно отображалось без пробелов. Например, на рисунке ниже надо было, чтобы слово "человек" было записано слитно.

слово человек

<div class="text-block" style="visibility: visible;">
    <span class="before-focus">ее этого ему ни тебя будет не тут время мы при для потом человек к быть тоже чел</span>
    <span class="now-in-focus" style="text-decoration: underline;">о</span>
    <span class="after-focus">век быть о или можно.</span> 
</div>

Спасибо за помощь и благодарю за понимание.


Ответы (1 шт):

Автор решения: Pavel Grishaev

Есть несколько способов сделать это:

  1. Поместить перенос строки в комментарий:

<div class="text-block" style="visibility: visible;">
    <span class="before-focus">ее этого ему ни тебя будет не тут время мы при для потом человек к быть тоже чел</span><!--
    --><span class="now-in-focus" style="text-decoration: underline;">о</span><!--
    --><span class="after-focus">век быть о или можно.</span> 
</div>

  1. Написать теги в одну строку без пробелов между тегами:

<div class="text-block" style="visibility: visible;">
    <span class="before-focus">ее этого ему ни тебя будет не тут время мы при для потом человек к быть тоже чел</span><span class="now-in-focus" style="text-decoration: underline;">о</span><span class="after-focus">век быть о или можно.</span> 
</div>

  1. Сделать внешний размер шрифта нулевым, а в тегах вернуть нужный. Но с точки зрения поисковика и буфера обмена пробел останется:

div {
  font-size: 0;
  line-height: 0;
}

span {
  font-size: 14px;
  line-height: 20px;
}
<div class="text-block" style="visibility: visible">
    <span class="before-focus">ее этого ему ни тебя будет не тут время мы при для потом человек к быть тоже чел</span>
    <span class="now-in-focus" style="text-decoration: underline;">о</span>
    <span class="after-focus">век быть о или можно.</span> 
</div>

→ Ссылка