Вам бы в целом пересмотреть верстку этого элемента, так как скролл добавить не проблема, если изменить позиционирование у элементов. Либо смотрите в сторону скрипта.
Известный баг/явление с отступами у inline элементов. Побеждается несколькими способами. Например, float: left или отсуствием переноса строки в верстке:
Да как бы каждому свое удобней. Плюс еще существуют потребности конкретной задачи. Вопрос настолько абстрактный, что более конкретно ответа и не подберешь.
Дмитрий: Так дело не в самих свойствах, а в том, как они реагируют на условия которые вы задаете. В частности отступы left, right. При анимации их значение меняется, соответственно меняется и ширина блоков установленная как относительная величина. Вот текст и перестраивается.
Это понятно, но именно это свойство некорректно отрабатывает. В итоге вы получаете на большом тексте скачок 1-2 слов. Даже скорее transition: all 1.0s ease; косячит, так как эффект перехода ложится на него. Такое поведение вполне закономерно.
Дмитрий: Да, вы правы. Но тут никак не избежать этого эффекта. Скрытый блок примерно на 25% меньше основного, соответственно текст не может не скакать. Разве что вы зададите его через svg>text но тут придется делать переносы вручную.
romash: У вас есть блок. Определить его ширину можно только передав его и его содержимое в браузер. Соответственно оптимальный вариант такой:
1) Передаете блок, но не отображаете его, скрыв любым удобным способом;
2) Получаете необходимые значения и применяете их на блок;
3) Выводите копию или сам блок в удобном месте.
JS в этом смысле даже удобнее, так как вы по определению будете работать с каждым блоком по отдельности из-за его линейности.
romash: Теперь понятно.. надо подумать ) Самое очевидное, помещать текст во вторичный скрытый элемент, получать значение width и подставлять в svg, но надо тестировать.
По сути, БЭМ и создавался для крупных проектов. Почему вы хотите услышать чью-то указку, а не делать так как вам удобно? Методология — инструмент облегчающий вам жизнь и если вам нравится рубить дрова топором, не стоит брать для этого iPhone, даже если вам скажут об этом все вокруг.
