Как ограничить количество символов css

Как ограничить количество вводимых символов в поле?

На некоторых сайтах есть ограничение на количество вводимых символов в какое-то поле (например, оставления комментария), после набора максимального количества символов дальше ничего уже не вводится, как сделать это ограничение?

Отслеживать
задан 1 окт 2011 в 9:28
1,032 8 8 золотых знаков 33 33 серебряных знака 68 68 бронзовых знаков

Разобрался сам, поделись с другими. Как ограничить количество вводимых символов в Кириллица — 70 Латиница — 160

11 мар 2013 в 23:38

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Если поле input type=text , то задается maxlength ; если textarea , то нужен javascript ). Да и то всё это можно обойти) На пхп можно через strlen проверить длину введенных данных и если они больше х — вернуть ошибку)
Так пример чего Вам нужен? html, javascript, php??

Отслеживать
8,657 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
ответ дан 1 окт 2011 в 9:35
764 4 4 серебряных знака 20 20 бронзовых знаков
Да, я уже разобрался.
1 окт 2011 в 9:39

хотел бы уточнить — если юзается utf-8 то не strlen а mb_strlen
Вообще абсолютно солидарен, причем тут php я тоже не понял.

Как ограничить лимит символов строкой или количеством символов с помощью css?

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

Представьте макет кирпичной кладки, где каждый элемент имеет ширину: 200 пикселей; и каждый будет высотой: 250 пикселей; (это просто пример).

В каждом элементе есть миниатюра и ссылка, и часто эта ссылка занимает 2-3 строки, и поэтому высота каждого элемента отличается.

Есть ли способ установить максимальное количество символов в классе или отключить обертку после определенного количества строк? И, возможно, даже добавить какой-нибудь css-эффект для вставки содержимого: «. «; перед концом строки, чтобы показать, что она была обрезана?

Любая помощь приветствуется.

popsicle 11 Дек 2012 в 13:51

text-overflow:ellipsis , вероятно, ближе всего к тому, что вам нужно. Однако он не поддерживается в старых браузерах.

11 Дек 2012 в 13:54

Ах, идеально, чувак. Повозился с пробелами, переполнением текста: многоточием и т. д., и это дало мне именно то, что я хотел. Спасибо.

11 Дек 2012 в 14:01

Хе-хе, я как раз собирался создать для вас пример скрипта, а потом увидел ваш комментарий;) Вы можете принять мой ответ, если ваша проблема была решена с его помощью. счастливое кодирование. Ваше здоровье

11 Дек 2012 в 14:02

2 ответа

Лучший ответ

Вы можете попробовать text-overflow , однако у него есть некоторые ограничения, но он может вам подойти:

 This is some short content to demonstrate the css-property text-overflow
  #container< width:100px; height:50px; border:1px solid red; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; >

Christoph 11 Дек 2012 в 14:00

Не символы, но вы можете установить ширину элемента в пикселях и использовать свойство text-overflow, которое должно добавить » . «.

Кроме того, вы можете ограничить количество строк, установив высоту элемента, например, на 30 пикселей и установив свойство CSS line-height на 15 пикселей и добавив overflow:hidden . Таким образом у вас будет ровно две строки текста.

Лучший способ ограничить количество знаков в тексте

Можно использовать ‘monospace’ шрифт, у которого ширина всех символов одинаковая. Тогда можно будет посчитать ширину и указать его в пикселях.

Куда-нибудь добавляется тестовый span, внутри которого 100 символов, чтобы увеличить точность измерений. В консоли записываем реальную ширину элемента, разделенную на 100, получаем ширину букв с точностью до ,00

console.log( document.getElementById('test').offsetWidth / 100 );

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Сделал более точный калькулятор → https://jsfiddle.net/OPTlMUS/x5qk608a/ , быстрее можно будет считать)

Когда уже имеется ширина для конкретного шрифта и font-size, умножаем его на 20, и о чудо!)

* .cuttedText

proin sagittis nisl rhoncus mattis rhoncus urna





 С точки зрения банальной эрудиции, каждый индивидуум.
 А на Чебурашкины именины, испекли мы каравай.

Можете поискать и другие шрифты monospace .

P.s. если нужно именно 20 символов оставить, умножаем на 23, вместо 20.

А если имеется текст разных размеров и везде нужно порезать 20 символов, тут только JS. этот вариант сработает для всех таких элементов, не только для первого (учитывает и пробелы):

(function() < var cut = document.getElementsByClassName('cuttedText'); for( var i = 0; i < cut.length; i++ )< cut[i].innerText = cut[i].innerText.slice(0,20) + '. '; >>)();

.font2 .font3

 Lorem ipsum
 абвгд еёжзи йк лмно прстуф хцчшщ ъыь эюя
 абвгд еёжзи йк лмно прстуф хцчшщ ъыь эюя
 абвгд еёжзи йк лмно прстуф хцчшщ ъыь эюя

Как ограничить количество строк c помощью CSS?

Подскажите как сделать аналог «text-overflow: ellipsis; overflow: hidden;» только для нескольких строк.

Ну то есть есть текст, он в несколько строк с переносами. Необходимо ограничить количество строк в 3 единицы.

Пример:

Вопрос задан более трёх лет назад
53913 просмотров