JS文字溢出省略

请参考CSS的定义:


text-overflow版本:IE6+专有属性 继承性:无
语法:
text-overflow : clip | ellipsis 
取值:
clip :  默认值。不显示省略标记(...),而是简单的裁切 
ellipsis :  当对象内文本溢出时显示省略标记(...) 

说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
这个属性仅仅作用于水平内联方向的,普通的西方文本的溢出。内联溢出发生在行内的文本超出可用宽度却没有换行机会的时候。
要强制溢出发生并且应用 ellipsis 值,作者必须设置对象的 white-space 属性值为 nowrap 。
假如没有换行机会(例如,对象容器的宽度是狭窄的,而内有很长的没有合理断行的文本),没有应用 nowrap 也有可能溢出。
为了使 ellipsis 值被应用,此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden 。设置 overflow 属性为 scroll 或者 auto 时,此属性也会应用。但是会有滚动条出现。
通过选择省略标记,隐藏的文本可以被选择。当选择发生时,省略标记会隐藏而被文本替换。
此属性为在DHTML中制作省略标记提供了高效的方法。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textOverflow 。 
示例:
div { overflow: hidden; text-overflow:ellipsis; }

 

 

<div style="border:1px solid red;width:100px;height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
中文哦好打了近飞洒的了开发记得撒空间费的撒娇发的非科技萨菲萨德飞洒地方离开的萨菲了空间色拉肯德基发送了的积分撒了肯德基发
</div>

如果是table的话,style定义到tb上,并且在table 上定义以下style
<table border="1px" style="width:100px;table-layout:fixed">

 

function init(){
           
var a="额哦你就是你不是你妮妮你我我额维啊额人人他哦了啊我饿他一我了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊";
           
var newDivNode = $("<div>")
            .attr(
"id", "index")
            .html(a)
            .css(
"border","1px blue solid")
            .css(
"height","48px")
            .css(
"font-size","14px")
            .css(
"width","142px")//因为字体是14px,border是1px,所以div为142px可以显示10个字
            .css("overflow","hidden")//根据6楼提示把多余的隐藏了,开始本来准备帮你计算高度的(楼主也可以自己根据高度来设置提取字符的长度),可好像字体的高度不是14px,而是15px,不知道为什么?
            .appendTo($(document.body));
        }

运行之后可以看到后面的"啊啊啊啊啊啊。。。"那些字符串没显示出来。

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值