Html Div 和 Span 元素的 Maxlength
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3108218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Maxlength for Div and Span elements
提问by User 1034
How to set max length for Span and Div elements ?
如何设置 Span 和 Div 元素的最大长度？
回答by Pekka
There are the
有
max-height / max-width
CSS properties that will limit the width for block level elements (i.e. not spans). Reference
CSS 属性将限制块级元素的宽度（即不是spans）。参考
Note that they are not supported by IE 6.
请注意，它们不受 IE 6 支持。
回答by PbxMan
When the word contained is too large the div or span may overflow:
当包含的单词太大时，div 或 span 可能会溢出：
<div style="width: 80px; overflow: hidden;" >hhhhhhheeeeeellllllllllooooo</div>
- You can wrap a span with a div. It will cut the content if there are no spaces in the text but it will prevent overflow from happening.
- 您可以用 div 包裹一个跨度。如果文本中没有空格，它将剪切内容，但它会防止发生溢出。
If long words are the problem a CSS3 solution could be:
如果长词是问题，CSS3 解决方案可能是：
style="width: 80; word-wrap: break-word;"
样式=“宽度：80；自动换行：断字；”
回答by Yashashvi
inputand textareahtml tags have maxlength attribute but divand spanelement don't have. To restrict user from entering more characters compare to maxlength in span or div element, you can do following using javascriptand jquery:
input和textareahtml 标签有 maxlength 属性但div和span元素没有。要限制用户输入与 span 或 div 元素中的 maxlength 相比更多的字符，您可以使用javascriptand执行以下操作jquery：
You can add keydownevent listener on divor spanelement and add following functions in event listener.
您可以keydown在div或span元素上添加事件侦听器，并在事件侦听器中添加以下函数。
1: Using javascript substringmethod.
1：使用javascriptsubstring方法。
$("#div-element").on("keydown", function () {
var value = $("#div-element").val();
if (value.length > maxlength) {
$("#div-element").val(value.substring(0, maxlength));
}
}());
2: Returning falseon event.
2：回归false活动。
$("#div-element").on("keydown", function () {
var value = $("#div-element").val();
if (value.length > maxlength) {
return false;
}
}());
These both have followup issues which should be handled as well ie substringmethod change the cursor position, in keydownmethod we need to check which key is pressed, otherwise it return false even on backspace or delete key.
这些都有后续问题也应该处理，即substring方法更改光标位置，在keydown方法中我们需要检查按下了哪个键，否则即使在退格键或删除键上也会返回 false。
回答by hallie
You mean max width?
你的意思是最大宽度？
max-width: ??px;
回答by Palantir
If you mesn width, then use css width properties:
如果您设置宽度，则使用 css 宽度属性：
<div style='max-width:100px'>Content</div>
<span style='max-width:100px; display:block;'>Content</span>
If you really mean length of content, You can't, in HTML. You need to use a piece of javascript to do this. Take a look at JQuery, it's really easy to do. It will boil down to something like:
如果你真的是指内容的长度，你不能，在 HTML 中。您需要使用一段 javascript 来执行此操作。看看JQuery，它真的很容易做到。它将归结为：
$('#yourDivId').html().length
