Спрайты и длинный текст

Question

Многие кодеры используют спрайты, но они забывают, что спрайты требуют более-менее фиксированных контейнеров.Вы не можете использовать srite на h2, если не можете контролировать его высоту.H2 выглядит хорошо, когда у вас есть 1 (2) строки текста, но ад у вас выпадает, когда у вас есть 3 строки - следующее изображение из спрайта становится видимым.

Какое лучшее решение, чтобы это исправить?Значок внутри контейнера?

<h2>
    <span class="ico">Text that needs to be hidden</span>
    Lorem ipsum<br />dolor sit<br />amet
</h2>

Другое решение заключается в размещении изображений в файле спрайта по диагонали, но это решение не позволяет позиционировать на 100% 0.

Каково ваше решение?

Answer 1

Обратите внимание на расположение красной секции на изображениях ниже

Если ни ширина, ни высота не являются переменными, поместите изображение где-нибудь в спрайте.

---

Если высота переменная, но ширина фиксирована, вы можете попробовать разместить фон вдоль левого или правого края спрайта. Это позволит вам повторить-у.

---

Если ширина переменная, но высота фиксированная, вы можете попробовать разместить фон вдоль верхнего или нижнего края спрайта. Это позволит вам повторить-х.

---

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