Хороший способ определить максимальное количество символов в пользовательской области на веб-странице

Question

Я работаю над приложением купона, и у него есть область, где владельцы бизнеса могут ввести короткую "строку тега" для того, для чего предназначен купон. Например:

• 10% на одно блюдо!
• 5 долларов с
• 2 за 1 саке до 7 вечера
• 15 бесплатных блинчиков, если вас зовут Гэри

Опять же, это генерируется пользователем. Он будет отображаться на экране, который видят их клиенты. Я бы хотел, чтобы он отображался на одной строке в пределах определенного количества пикселей. Это будет в Arial.

Каков наилучший способ определить максимальное количество символов, позволяющее им включать их, чтобы он не занимал лишних строк или переполнения, учитывая множество браузеров...?

Answer 1

Если вы знаете font, font-sizeи всего width из одной строки вы можете просто выполнить метод проб и ошибок (то есть вводить символы до конца строки).

Узнав об этом, вы можете проверить общее количество символов на keyup и предупредить, если эта сумма достигнута.

Например, только в качестве примера, допустим, вы выбрали Arial 14px и проверили его, чтобы увидеть, что 10 символов - это примерно все, что может содержать одна строка. Тогда вы можете добавить что-то вроде этого

$('textarea').keyup(function(){
    if($(this).val().length == 10){
        alert('You\'ve reached the limit');
    }
});

Рабочий пример: http://jsfiddle.net/uGDKn/