html属性如何控制显示内容字数?

html-css07

html属性如何控制显示内容字数?,第1张

你的内容放到一个层里面,style设置为overflow : hidden你自己先根据字号算出100个字所占的大小,把层大小固定即可。但是这种情况下,我们一般不使用html的属性来控制字数。不知道你从数据库里读出数据是用何种语言?PHP?ASP?JSP?以JSP为例:String title = "xxxx"//你从数据库里读到的字符串内容title = title.substring(0,100)//取前100个字符或者你用JS动态插入,写一个层<div id="title"></div><script>var titleStr = "xxxxx"//你从数据库里读到的字符串内容document.getElementById("title").innerHTML = titleStr.substring(0,100)</script>

试试这个: limit.jsview plaincopy to clipboardprint?

function limit(){

var txtNote//文本框

var txtLimit//提示字数的input

var limitCount//限制的字数

var isbyte//是否使用字节长度限制(1汉字=2字符)

var txtlength//到达限制时,字符串的长度

var txtByte

this.init=function(){

txtNote=this.txtNote

txtLimit=this.txtLimit

limitCount=this.limitCount

isbyte=this.isbyte

txtNote.onkeydown=function(){wordsLimit()}txtNote.onkeyup=function(){wordsLimit()}

txtLimit.value=limitCount

}

function wordsLimit(){

var noteCount=0

if(isbyte){noteCount=txtNote.value.replace(/[^\x00-\xff]/g,"xx").length}else{noteCount=txtNote.value.length}

if(noteCount>limitCount){

if(isbyte){

txtNote.value=txtNote.value.substring(0,txtlength+Math.floor((limitCount-txtByte)/2))

txtByte=txtNote.value.replace(/[^\x00-\xff]/g,"xx").length

txtLimit.value=limitCount-txtByte

}else{

txtNote.value=txtNote.value.substring(0,limitCount)

txtLimit.value=0

}

}else{

txtLimit.value=limitCount-noteCount

}

txtlength=txtNote.value.length//记录每次输入后的长度

txtByte=txtNote.value.replace(/[^\x00-\xff]/g,"xx").length

}

}

function limit(){

var txtNote//文本框

var txtLimit//提示字数的input

var limitCount//限制的字数

var isbyte//是否使用字节长度限制(1汉字=2字符)

var txtlength//到达限制时,字符串的长度

var txtByte

this.init=function(){

txtNote=this.txtNote

txtLimit=this.txtLimit

limitCount=this.limitCount

isbyte=this.isbyte

txtNote.onkeydown=function(){wordsLimit()}txtNote.onkeyup=function(){wordsLimit()}

txtLimit.value=limitCount

}

function wordsLimit(){

var noteCount=0

if(isbyte){noteCount=txtNote.value.replace(/[^\x00-\xff]/g,"xx").length}else{noteCount=txtNote.value.length}

if(noteCount>limitCount){

if(isbyte){

txtNote.value=txtNote.value.substring(0,txtlength+Math.floor((limitCount-txtByte)/2))

txtByte=txtNote.value.replace(/[^\x00-\xff]/g,"xx").length

txtLimit.value=limitCount-txtByte

}else{

txtNote.value=txtNote.value.substring(0,limitCount)

txtLimit.value=0

}

}else{

txtLimit.value=limitCount-noteCount

}

txtlength=txtNote.value.length//记录每次输入后的长度

txtByte=txtNote.value.replace(/[^\x00-\xff]/g,"xx").length

}

} 页面调用:view plaincopy to clipboardprint?

<html>

<body>

<input id="txtNote" />

还可输入<input type="text" id="txtCount" />个字符

</body>

<mce:script type="text/javascript"><!--

var lim=new limit()

lim.txtNote=document.getElementById("txtNote")

lim.txtLimit=document.getElementById("txtCount")

lim.limitCount=20

lim.isbyte=true

lim.init()

// --></mce:script>

</html>

1、限制input文本框的输入长度的话可以为其加上maxlength属性来限制。如果是限制input的显示长度的话,可以直接用CSS中的width来限制。

2、添加css属性, style="width:200px"。

3、 限制input标签的长度:<input type="text" value="12345678901234" size="5"/>

<input type="text" maxlength="10" value="12345678901234"/><input type="text"  value="12345678901234"  style="width:30px">。

4、只有maxlength属性是限制输入长度的,当输入字符长度(数量)达到maxlength的值时,不能再输入了(输入的字符不被接受)。

5、其他的size和style限制的是输入框显示长度,但是不限制输入长度,一直可以输入字符,,当输入的字符长度(数量)超过超过允许显示的长度时,超出部分会被输入框遮盖,而不是截断,你可以按左右键(← →)来滚动查看被遮盖部分的字符串。