Как сделать, чтобы при переносе последнего слова, вместе с ним переносилась иконка, идущая за ним?

Question

[Verygoodman]

Всем привет. Есть такая задача.
Плагин генерирует html табличку, которая на выходе в ячейках th имеет ссылку + иконку для сортировки:

<tr>
     <th><a href="#">First name</a> <i class="fas fa-exchange-alt"></i></th>        
     <th><a href="#">Last name</a> <i class="fas fa-exchange-alt"></i></th>        
 </tr>
...

Когда у экрана уменьшается ширина, то слова в этих ячейках выстраиваются в столбик:

Last
name
<i class="fas fa-exchange-alt"></i>

Можно ли сделать так, чтобы не влезая в плагин, уже на загруженной странице добавить какие-то свойства для иконки, чтобы при уменьшении ширины экрана иконка была на одной строке вместе с последним словом? Например:

Last
name <i class="fas fa-exchange-alt"></i>

или

Age <i class="fas fa-exchange-alt"></i>

Answer 1

[Ivan Bogachev]

не влезая в плагин, уже на загруженной странице

const table = document.querySelector('table');
const html = table.innerHTML;
const modifiedHtml = html.replace(/>\s+<i/g, '>&nbsp;<i');

table.innerHTML = modifiedHtml;

Comments

[Verygoodman]

Я проверил, в плагине там уже стоят эти пробелы

существуют ли еще какие-то способы кроме пробелов?

[Ivan Bogachev]

Verygoodman, вы уверены, что там стоят только неразрывные пробелы, и нет никаких других?

[Verygoodman]

Ivan Bogachev, не уверен

[Verygoodman]

я сделал const html = table.innerHTML; console.log(html)

[Verygoodman]

Ivan Bogachev, после вашего кода вставились пробелы

[Ivan Bogachev]

Verygoodman, и после того, как там остались только неразрывные пробелы, все еще появляется перенос иконки на новую строку?

[Verygoodman]

Ivan Bogachev, да, вот:

[Ivan Bogachev]

Verygoodman, учитывая, что неразрывные пробелы - это очень надежный метод, который так просто не ломается, могу предположить, что у вас в верстке уже есть стили, где или тег a или i имеют свойство display, отличное от inline, которое у них должно бы быть по умолчанию. Попробуйте сделать их inline-элементами.

[Verygoodman]

Ivan Bogachev, вы правы, ваш код + display: inline; для иконки работает. Но есть одна загвоздка... Возможно вы подскажете как ее решить? Если сделать иконку display: inline; я ее не могу перевернуть на 90 градусов как было ранее. Я поворачивал иконку на 90 градусов потому, что она бесплатная только в горизонтальном положении, а мне нужна была в вертикальном... Раньше было так:

.fa-exchange-alt {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
            color: #b6b6b6;
            font-size: 14px;
        }

Если добавить display: inline; то иконка будет такой:

Как в таком случае ее повернуть на 90 градусов?