省略号在安卓手机上显示在多余文字显示省略号中间(应该是在底部)或者多余文字显示省略号覆盖省略号,这个有兼容吗?

&p&style="width: 300overflow:white-space:text-overflow:"&
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
实现方法:
overflow:&hidden;
text-overflow:ellipsis;
white-space:&nowrap;
效果如图:
但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号,如下。
实现方法:
display:&-webkit-box;
-webkit-box-orient:&vertical;
-webkit-line-clamp:&3;
overflow:&hidden;
效果如图:
适用范围:因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。&为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display:&-webkit-&必须结合的属性&,将对象作为弹性伸缩盒子模型显示&。
-webkit-box-orient&必须结合的属性&,设置或检索伸缩盒对象的子元素的排列方式&。
实现方法:
p{position:&relative;&line-height:&20px;&max-height:&40px;overflow:&hidden;}
p::after{content:&"...";&position:&absolute;&bottom:&0;&right:&0;&padding-left:&40px;
background:&-webkit-linear-gradient(left,&transparent,&#fff&55%);
background:&-o-linear-gradient(right,&transparent,&#fff&55%);
background:&-moz-linear-gradient(right,&transparent,&#fff&55%);
background:&linear-gradient(to&right,&transparent,&#fff&55%);
效果如图:适用范围:该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
将height设置为line-height的整数倍,防止超出的文字露出。
给p::after添加渐变背景可避免文字只显示一半。
由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:&span&&&span/&);兼容ie8需要将::after替换成:after。
阅读(...) 评论()拒绝访问 | www.weste.net | 百度云加速
请打开cookies.
此网站 (www.weste.net) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(b1b35-ua98).
重新安装浏览器,或使用别的浏览器Android2.2 API 中文文档系列(1)_百度文库
您的浏览器Javascript被禁用,需开启后体验完整功能,
享专业文档下载特权
&赠共享文档下载特权
&10W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员,立省24元!
Android2.2 API 中文文档系列(1)
&&Android2.2 API 中文文档系列(1) ―― TextView
阅读已结束,下载本文需要
想免费下载更多文档?
定制HR最喜欢的简历
下载文档到电脑,同时保存到云知识,更方便管理
加入VIP
还剩4页未读,
定制HR最喜欢的简历
你可能喜欢爱生活,爱编程; 每天一小步,总有新高度; 500mi 勇闯天涯,勇创辉煌;
Android中TextView内容过长加省略号,设置超出6个字就用省略号表示
设置超出6个字就用省略号表示:
android:id="@+id/wholesale_carrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="@dimen/sp24"
android:textColor="#6699CC"
android:maxEms="6"
android:maxLines="1"
android:ellipsize="end"
android:text="供货商"
textview中有个内容过长加省略号的属性,即ellipsize,用法如下:
在xml中 :ellipsize = "end"  
省略号在结尾
android:ellipsize = "start"   省略号在开头
android:ellipsize = "middle"
省略号在中间
android:ellipsize = "marquee"
最好加一个约束android:singleline = "true"
也可以用代码语句
tv.setEllipsize(TextUtils.TruncateAt.valueOf("END"));
tv.setEllipsize(TextUtils.TruncateAt.valueOf("START"));
tv.setEllipsize(TextUtils.TruncateAt.valueOf("MIDDLE"));
tv.setEllipsize(TextUtils.TruncateAt.valueOf("MARQUEE"));
最好再加一个约束tv.setSingleLine(true);
不仅对于textview有此属性,对于editext也有,不过它不支持marquee
没有更多推荐了,CSS实现文本溢出的部分用省略号代替的方法【html5吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名:今日本吧第个签到,本吧因你更精彩,明天继续来努力!
本吧签到人数:0成为超级会员,使用一键签到本月漏签0次!成为超级会员,赠送8张补签卡连续签到:天&&累计签到:天超级会员单次开通12个月以上,赠送连续签到卡3张
关注:93,747贴子:
CSS实现文本溢出的部分用省略号代替的方法收藏
我们通常在设计网页的时候,由于相关的需求需要一行定宽,然而有时候文字的展现过长就会溢出。今天,E良师益友网就单行和多行两种情况来说明一下溢出的文字用省略号代替。一、单行溢出1,单行溢出,超出部分显示...或者截取。前提必须有宽度。 CSS:{width:overflow:white-space:text-overflow:},截取为实现代码:width:300
text-overflow:
white-space:
效果如图:
但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号:二、多行溢出 {display:-webkit-overflow:text-overflow:-webkit-line-clamp:2;-webkit-box-orient:}实现方法: display: -webkit-
-webkit-box-orient:
-webkit-line-clamp: 3;
效果如图:
适用范围: 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端; 说明: 1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性: 2.display: -webkit- 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 3.-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。 另外,除了上述适用于WebKit浏览器及移动端还可用下面这种现实多行溢出:实现方法: p{position: line-height: 20 max-height: 40overflow:}
p::after{content: &...&; position: bottombottom: 0; rightright: 0; padding-left: 40
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(rightright, transparent, #fff 55%);
background: -moz-linear-gradient(rightright, transparent, #fff 55%);
background: linear-gradient(to rightright, transparent, #fff 55%);
适用范围:该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。说明:1.将height设置为line-height的整数倍,防止超出的文字露出。2.给p::after添加渐变背景可避免文字只显示一半。3.由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:&span&…&span/&);兼容ie8需要将::after替换成:after。
登录百度帐号}

我要回帖

更多关于 文字显示省略号 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信