Задача с фоном

[max999]

У строковых элементов фон начинается на первом, а заканчивается на последнем символе.

У блочных элементов фон продолжается на всю ширину родителя.

Задача такая:

Есть фраза, текст (количество текста динамически может меняться), который находится в родительском элементе, и у этого текста задан цвет фона. Как сделать, чтобы при увеличении количества символов, если фраза не помещается в одну строку, то этот фон продолжался на всю ширину родительского элемента, т. е. занимал весь объём текста (как у блочных элементов)?

И наоборот, если элемент блочный, например заголовок (h1, h2, h3... и т. п.), то если текст в нём умещается в одной строке, то, как сделать, чтобы фон НЕ продолжался на всю ширину родителя?

Другими словами, надо, чтобы если текст помещается в одной строке, то его фон заканчивался на последнем символе, а не продолжался до конца этой строки, а если не помещается и переходит на следующую строку, то фон полностью покрывал все строки текста и продолжался до края родителя. Если ещё проще, то, если текст умещается на одной строке, надо чтобы фон у него вёл себя как у строкового элемента, а если не умещается, то, как у блочного элемента.

Надеюсь, понятно объяснил.

Подозреваю, что кээсэсом этого добиться невозможно и тут попахивает яваскриптом. Кто, что может посоветовать?

Заранее благодарен.

[psywalker]

Да, я полагаю, что на JS нужно проверять ширину первой строки и если она соответствует ширине родителя, то делать элемент блочным.

[mishka]

В первом случае сделать элемент блочным (display:block). Во втором инлайновым (display:inline)

[max999]

Ребята, спасибо за быстрый ответ. Но, пожалуйста, можете привести готовые конструкции, ну, или хотя бы примеры (код), как это примерно можно сделать, сам с удовольствием поизучаю, а то я, к сожалению, с яваскриптом не дружу.

Был бы Вам очень признателен.