Максимальная длина для элементов Div и Span - PullRequest
Новая
       3

Максимальная длина для элементов Div и Span

6 голосов
/ 24 июня 2010

Как установить максимальную длину для элементов Span и Div?

Ответы [ 5 ]

4 голосов
/ 24 июня 2010

Существуют свойства CSS 

max-height / max-width

, которые ограничивают ширину элементов уровня блока (т. Е. Не span s). Ссылка

Обратите внимание, что они не поддерживаются IE 6 .

1 голос
/ 10 мая 2018
Html-теги

input и textarea имеют атрибут maxlength, а элементы div и span - нет. Чтобы запретить пользователю вводить больше символов по сравнению с максимальной длиной в элементе span или div, вы можете выполнить следующие действия, используя javascript и jquery:

Вы можете добавить keydown прослушиватель событий для элемента div или span и добавить следующие функции в прослушиватель событий.

1: использование метода javascript substring. 

$("#div-element").on("keydown", function () {
    var value = $("#div-element").val();
    if (value.length > maxlength) {
        $("#div-element").val(value.substring(0, maxlength));
    }
}());

2: возврат false по событию. 

$("#div-element").on("keydown", function () {
    var value = $("#div-element").val();
    if (value.length > maxlength) {
        return false;
    }
}());

Обе эти проблемы связаны с последующими действиями, которые также должны быть устранены, т. Е. Метод substring изменяет положение курсора, в методе keydown нам нужно проверить, какая клавиша нажата, в противном случае он возвращает false даже при возврате или клавише удаления.

1 голос
/ 14 августа 2014

Если содержащееся слово слишком большое, div или span могут переполниться: 

<div style="width: 80px; overflow: hidden;" >hhhhhhheeeeeellllllllllooooo</div>
  • Вы можете обернуть промежуток с div. Он обрезает содержимое, если в тексте нет пробелов, но предотвращает переполнение.

Если проблема в длинных словах, решение CSS3 может быть следующим:

style = "width: 80; перенос по словам: break-word;"

0 голосов
/ 24 июня 2010

Вы имеете в виду максимальную ширину? 

max-width: ??px;
0 голосов
/ 24 июня 2010

Если вы указали ширину, то используйте свойства ширины css: 

<div style='max-width:100px'>Content</div>
<span style='max-width:100px; display:block;'>Content</span>

Если вы действительно имеете в виду длину содержимого, вы не можете в HTML.Вам нужно использовать кусок JavaScript, чтобы сделать это.Посмотрите на JQuery, это действительно легко сделать.Это будет сводиться к чему-то вроде: 

$('#yourDivId').html().length
...