Как разбивать строку из формы Vue js

Question

Подскажите, как исправить такую проблему:

Есть форма (поле ввода), со связкой v-model - это поле я вывожу в шаблоне посредством {{ text }}. Так вот, если строка очень длинная, как её можно ограничить? Т.е строка из формы просто идёт сплошником и не переносится, даже если установлена ограниченная ширина.

Пробовал max-width, width - не помогает.

Когда строка из поле ввода короткая:

Если строка длинна, то происходит такое:

Ограничение ширины не даёт никакого эффекта - как исправить?

Answer 1

Ну к примеру можно и вот так.

// z - 31, a - 6, b - 20
"zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz aaaaaa bbbbbbbbbbbbbbbbbbbb"
   .split(" ")
   .map(e => (e.length > 10 ? e.match(/.{1,10}/g) : e))
   .reduce((str, el) => str + (el instanceof Array ? el.join(" ") + " " : el + " "), "")
   .slice(0, -1);

Результатом будет

'zzzzzzzzzz zzzzzzzzzz zzzzzzzzzz z aaaaaa bbbbbbbbbb bbbbbbbbbb'

Answer 2

Попробуйте задать вашему блоку - обертке text-overflow: ellipsis;. Данное CSS свойство определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область.

Либо можете использовать встроенные возможности vue - фильтры: https://ru.vuejs.org/v2/guide/filters.html

Тут можно менять содержимое как вздумается.

БЛОГ НА HUSL

Как разбивать строку из формы Vue js

Ответы (2 шт):