Вы можете объединить элементы, проверив также ложное значение.
const
merge = (...a) => a.reduce(
(r, a) => (a.forEach((o, i) => r[i] = o || r[i] || !r[i] && o), r),
[]
);
console.log(merge([null, null, { a: 1 }], [{ c: 3 }, null, { a: 3, b: 2 }]));
console.log(merge([], [null, null, { t: 4 }]));
.as-console-wrapper { max-height: 100% !important; top: 0; }
Попробуйте исправить проблему с перепрошивкой, установив display: block для вашего элемента
в этом узкая колонна.
Если вы знаете начальную и конечную точку каждой строки, вы можете поместите интервал вокруг каждой строки и превратите его во встроенный блок
#wrap {font-size:14px; line-height:16px;}
a span{display:-moz-inline-block; display:inline-block;line-height:14px;padding:1px 0;}
a:hover {background:red;}
<div id="wrap">
dsvlaksvh; asvj asdfh;dhldv hd d dl h dfhd d dfh; daljfda k;d <a href="#" >
<span>hdv </span><span>dvh ldvhldf dhk </span><span>;dhkdf hdl hdfk
</span><span>dfhkldf h vkhg j</span></a> glj gj f gjl fjl fj f
</div>
Используйте относительные единицы для установки заполнения.
Добавление заполнения: 0,2ex 0; background: red;
использование Firebug / Dragonfly для примера ссылки в вопросе прекрасно работает для меня, независимо от размера шрифта (установленного с помощью CSS или увеличения).
Единственная проблема с изменением размера шрифта в Firefox в том, что фон начинает перекрывать предыдущую строку; но это проблема line-height
.