Вопрос по всплывающей подсказке

Здравствуйте.
Подскажите, как заставить текст с описанием понимать перенос строк?
Не помогают даже <br> и т.п. Перепробовал разные способы, что бы получить желаемое.
Вписываю к примеру так:

За первое место в чемпионате:
Roadster Championship (кликабельно)
Дата проведения - 01.01.2017

В ЛК вроде с <br> это решается, если задать минимальный размер подсказки в 370px.Что бы она вся влезла. (почему то не растягивает в этом случае само, хотя в ксс от 300 до 500 указано)
А вот на странице юзер лист вобще ни как не хочет правильно работать.

Заранее спасибо.

И <br> уродуют страницу со всеми достижениями. 🙁

Чем дальше тем интересней ))
Вобщем если просто переносить строки без бр, то в лк все норм вроде.
Но на странице юзерлист все в одну строку.
если вписать бр то на странице юзер листа все по строкам, как надо а в ЛК ломается строка еще до бр. эхх

Вот у вас тоже текст переносит и не растягивает подсказку до допустимых максимальных 500px

-

Вот без бр в ЛК. Все как надо.

Но этот вариант не работает на странице юзерлист

Пример

и приходится использовать br

Но с br в строке ссылки, в подсказке ЛК, появляется лишняя пустая строка под этим текстом с ссылкой.

Вот пример

Если не использовать br на строке ссылки, то естественно опять все переносится.
Хотя оно и так переносится, если не влезает.

Единственный вариант который я нашел, это увеличить минимальную ширину подсказки. Но это не решение и в этом случае в ЛК мы имеем лишнюю пустую строку и лишние отступы под и над картинкой ачивки.

Не знаю, как подробней описать.

Я видимо сложно пытаюсь объяснить простое.

Цель такая, что при написании 3-4 строк текста каждая строка должна быть полной, без переносов, если длинна строк не превышает максимальные значение блока подсказки в 500px
Оно переносит как то произвольно. Где то блок подсказки длинней, где то короче. Даже строку которая умещалась бы в 370px переносит. На скринах же вроде должео быть понятно.

А как это можно решить стилями? я пробовал по разному. и fix-content и auto и тд. на разных уровнях.

Я не понимаю, как вы не видите, что даже у вас строка переноситься.

вот к примеру мы дарим стих
тут 4 строки.

вот попытка сделать это с бр

Содержимое блока с классом achiev-float-descr должно растянуть весь блок с классом achiev-float, что бы влезла вся строка.
Этого не происходит и стих превращается в кашу.

Вроде все перепробовал до этого. В том числе и 100% на разных уровнях.

В итоге с вашей помощью удалось решить так

.achiev-float .achiev-float-descr {
    width: 100%;
    display: grid;
}

Спасибо!