Как подобрать допустимое количество символов для строки, чтобы не поломалась верстка?

Question

[crossfire]

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

Поясню, есть блок 180 px, там должен быть текст (имя пользователя) и он не должен переносится на новую строку. Шрифтом Helvetica на латинице в блок помещается 16 символов буквой W и 59 символов буквой I.
Получается на валидацию поля ввода надо ставить ограничение 16 символов, чтобы строка не перенеслась и не поломала верстку? Или может есть какие-то варианты просчитать общую длину строки которая получится перед приемом данных из формы? Как лучше поступить в такой ситуации?

Answer 1

[xmoonlight]

max-width: 180px;

Comments

[crossfire]

на этот параметр надо валидировать поле ввода у формы?

[xmoonlight]

crossfire: нет. надо в CSS прописать это для поля ввода формы.

[crossfire]

xmoonlight: Это будет работать не на длину самого поля, а именно на принимаемые им символы?

[xmoonlight]

crossfire: это длина поля в пикселях. Это CSS!

[crossfire]

xmoonlight: Меня не длинна поля интересует! А чтобы количество принимаемых формой из этого поля символов вписалось в 180 px!

[littleguga]

crossfire: А чем Вам не нравится, если оно не угодит туда?

[littleguga]

crossfire: https://jsfiddle.net/9qj7r8m6/

Answer 2

[Максим Тимофеев]

div.text {overflow:hidden; display:block; width: 180px; height:50px; text-overflow: clip; }
div.text>p:last-of-type:after {content:"...";}

Думаю идея понятно дальше допилить по вкусу.

Answer 3

[Виталий Инчин ☢]

Почитайте про text-overflow, может быть легче не ограничивать размер блока, а скрыть то, что не влазит. Мне кажется, это идеально.

А высчитать можно будет только динамически, то есть при вводе, ведь буквы (к примеру) "Ш" и "ь" имеют совсем разную ширину, а пользователь может ввести любой набор символов.
Под "динамически" я имею ввиду при каждом Нажатии клавиши обрабатывать его - получать ширину буквы (создавать Текстовый узел с этой буквой и получать его ширину) на нажатой клавише и уже исходя из оставшегося места в блоке либо делать preventDefault() и т.п, либо, собственно, допускать букву к вводу. Но это такая морока :)