CSS控制文本显示长度
CSS控制文本长度比用c和fn标签来控制文本长度好用多了,特此记录下。
此处要用到的语法为CSS中的:
1、text-overflow:clip|ellipsis
clip:不显示省略标记(...),而是简单的裁切;
ellipsis:当对象内文本溢出时显示省略标记(...)
text-overflow:ellipsis
2、white-space:normal|pre|nowrap|pre-wrap|pre-line|inherit
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到<br>标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承white-space属性的值
强制文本在一行内显示(white-space:nowrap)
3、overflow:visible|auto|hidden|scroll
溢出内容为隐藏(overflow:hidden)
<html> <head> <style type="text/css"> .text-hide{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:200px; } </style> </head> <body> <div class="text-hide"> Dota官方全称LogoDota是Defense of the Ancients的简称,可以译作守护古树、守护遗迹、远古遗迹守卫, 是指基于魔兽争霸3:冰封王座(由暴雪娱乐公司出品)的多人即时对战自定义地图,可支持10个人同时连线游戏。DotA是目前唯一被暴雪娱乐公司官方认可的魔兽争霸的RPG地图。Allstars系列现更新作者为美国人IceFrog。 截至日前,DotA Allstars官方最新版本为6.74c,AI版本为DOTA6.74c AI简体中文版。 </div> </body> </html>
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18