Особенный перенос текста CSS. Как сделать?

Question

[Julia]

Добрый день! Очень нужна ваша помощь. Стоит задача переноса текста в блоке из двух строк таким образом, чтобы сначала происходило заполнение текстом нижней строки, и, при необходимости, перенос слова на первую/верхнюю строку таким образом, чтобы переносилось первое слово предложения, а оставшийся текст заполнял вторую строку. Пример:

В Барселоне
установится солнечная и безветреная погода.

Answer 1

[GreatRash]

Хм... но ведь у вас в примере на первой строке два слова!?

Comments

[Julia]

Я не смогла придумать другую фразу. Получилось так.

Answer 2

[romy4]

разбивание текста на две части: первое слово и всё остальное.
вторую часть украшать стилем "без переносов"

Comments

[Julia]

ольшое спасибо! Мы тоже так с девочками думали.
Сложность заключается в том, что при уменьшении размера экрана, строка 2 перейдет на строку 3, а нам это не подходит, так как произойдет сбой решетки с фото и блоками текста.
Юлия

[Кирилл]

Julia: А что должно быть со второй строкой при уменьшении экрана?

[Julia]

В этом и заключается момент: хотелось бы, чтобы 3 строка не появлялась, а чтобы при уменьшении экрана, слова из второй строки равномерно заполняли строку 1. Или я чего-то не понимаю...

[romy4]

Julia: смотрите свойство htmlbook.ru/css/white-space

Answer 3

[Сергей]

Код не получается в комментарий засунуть

Большое спасибо! Мы тоже так с девочками думали.
Сложность заключается в том, что при уменьшении размера экрана, строка 2 перейдет на строку 3, а нам это не подходит, так как произойдет сбой решетки с фото и блоками текста.
Юлия

white-space
text-overflow

white-space: nowrap;
display: inlaine-block;
text-overflow: ellipsis;
overflow: hidden;

Answer 4

[Денис Инешин]

Вычислять на JS только. В CSS конечное есть кое-какие фишечки, вроде этой: jsfiddle.net/IonDen/9byr9ktv
Но это не совсем то.