CSS统制文本显示长度
日期：2014-05-17 浏览次数：20713 次
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）
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
