CSS省略号text-overflow超出溢出显示省略号
css限制显示字数，文字长度超出部分用省略号表示【转】
css限制显⽰字数，⽂字长度超出部分⽤省略号表⽰【转】为了保证页⾯的整洁美观，在很多的时候，我们常需要隐藏超出长度的⽂字。
这在列表条⽬，题⽬，名称等地⽅常⽤到。
(1).⽂字超出⼀⾏，省略超出部分，显⽰'...'
如果这种情况⽐较多，可以取⼀个切合作⽤的类名⽤于复⽤。
.line-limit-length {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; //⽂本不换⾏，这样超出⼀⾏的部分被截取，显⽰...
}
<div class="item">
<p class="line-limit-length">最新消息：神秘地球⿊洞深不可测，不停吸⼊周围海⽔。
</p>
<i class="icon icon-arrow-"></i> //图标字体
</div>
(2). 可以给定容器宽度限制，超出部分省略
.product-buyer-name {
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<h5 class="product-buyer-name">橘⼦橘⼦</h5>
<h5 class="product-buyer-name">橘⼦橘⼦匿名⽤户匿名</h5>。
CSS控制文字显示一行，超出显示省略号
CSS控制⽂字显⽰⼀⾏，超出显⽰省略号这⼏天在项⽬需求⾥⾯遇到了很多之前没做过的需求，也慢慢更加认识到了css的强⼤，是真的强⼤。
以后会把⾃⼰技术调研的东西都写出来，哪怕只是⼀点点或者很⼩的点，重在学习。
“CSS控制⽂字显⽰⼀⾏，超出显⽰省略号”，我⾃⼰做的时候，因为场景的div宽度是固定的，我就直接截取了⽂本的前 X 个字符显⽰，类似于这样：str = str.slice(0,10) +"……"';其实这样做有很⼤的弊端，⽹站每次数据刷新的时候，都要这样做⼀次，最后发现可以⽤css实现，如下所⽰：<!DOCTYPE html><html><head><title>CSS控制⽂字显⽰⼀⾏，超出显⽰省略号</title><style type="text/css">.text-line{height: 100px;background-color: #AAA8A8;display: inline-block;/*下⾯是必需的*/width: 100px;color: #000;white-space: nowrap;/*把⽂本强制显⽰在⼀⾏*/overflow: hidden;/*隐藏超出部分的⽂字*/text-overflow: ellipsis;/*超出显⽰省略号*/}</style></head><body><div class="text-line">超出⼀⾏只显⽰部分，后⾯的显⽰省略号…，利⽤css实现，⽽不是⾃⼰去判断留多少个字</div></body></html>最近还发现了 css 的 content 属性，还有⼀些 .svg 的 icon 可以直接修改.svg 中的 fillColor 来实时改变图标样式颜⾊，还有⼀些资源压缩⼯具，还是得好好学习，要学的东西太多了。
CSS文本溢出显示省略号（ellipsis）
CSS⽂本溢出显⽰省略号（ellipsis）1、csstext-overflow语法：text-overflow : clip | ellipsistext-overflow参数值和解释：clip : 不显⽰省略标记（...），⽽是简单的裁切ellipsis : 当对象内⽂本溢出时显⽰省略标记（...）单⾏display: block;width: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多⾏直接⽤css属性设置(只有-webkit内核才有作⽤)overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;移动端浏览器绝⼤部分是WebKit内核的，所以该⽅法适⽤于移动端；-webkit-line-clamp⽤来限制在⼀个块元素显⽰的⽂本的⾏数,这是⼀个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
display: -webkit-box将对象作为弹性伸缩盒⼦模型显⽰ 。
-webkit-box-orient设置或检索伸缩盒对象的⼦元素的排列⽅式 。
text-overflow: ellipsis以⽤来多⾏⽂本的情况下，⽤省略号“…”隐藏超出范围的⽂本。
以下作为溢出显⽰省略号，line-clamp 表⽰显⽰多少⾏的数据，在数据最后显⽰….ellipsis1{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.ellipsis2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:ellipsis;overflow:hidden}.ellipsis3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden}2、插件。
css文本（超出）溢出显示省略号
css⽂本（超出）溢出显⽰省略号效果图如下：⽂本超出才会显⽰省略号
overflow
visible:默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显⽰滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显⽰滚动条，以便查看其他的内容;
white-space
normal：默认值，多余空⽩会被浏览器忽略只保留⼀个；
pre：空⽩会被浏览器保留；
pre-wrap：保留⼀部分空⽩符序列，但是正常的进⾏换⾏；
pre-line:合并空⽩符序列，但是保留换⾏符；
nowrap:⽂本不会换⾏，⽂本会在同⼀⾏上继续，直到遇到<br/>标签为⽌;
text-overflow
clip：不显⽰省略号（...），⽽是简单的裁切;
ellipsis：当对象内⽂本溢出时，显⽰省略标记；
综上所述，⽂本溢出变省略号设置如下：
1、容器宽度：width：value；（px、%，都可以）
2、强制⽂本在⼀⾏内显⽰:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出⽂本显⽰省略号：text-overflow：ellipsis;
注，此⽅法是设置单⾏⽂本！！！
如果感觉对⾃⼰有帮助，⿇烦点⼀下关注，会⼀直和⼤家分享知识的，谢谢！！！。
css强制换行显示省略号之显示两行后显示省略号
css强制换⾏显⽰省略号之显⽰两⾏后显⽰省略号1，⾸先来⼀个固定宽度，在⼀⾏显⽰，超出隐藏，显⽰省略号的样式display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;2，其实来⼀个可以设置让它显⽰多少⾏后再显⽰省略号，这只能⽤私有属性解决了text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;/*重点，不能⽤block等其他*/-webkit-line-clamp: 2;/*重点IE和⽕狐不⽀持*/-webkit-box-orient: vertical;/*重点*/因为 -webkit-line-clamp: 2 是webkit的私有属性，其他浏览器不可以⽤。
所以在⽹上找了⼀下，有个插件还是很好⽤的，完美的实现了这个属性。
还可以配置很多属性，⽐如是否动画展开，不⼀定要显⽰省略号，可以显⽰其他符号，是否启⽤ -webkit-line-clamp: 这个属性等等；下载地址 https:///josephschmitt/Clamp.js⾸先引⼊<script src="../clamp.js"></script>//调⽤⽅法：$clamp(dom,options); dom是节点，options是配置项⽤这个插件需要注意⼀下事项：我在⽤这个插件的时候，IE和⽕狐下⾯形态各异，⽕狐在第⼆⾏还没到第⼆⾏的末尾处（甚⾄还有很宽的距离）就显⽰省略号了。
IE有时候也出现。
查看了⼀下源码发现这个和指定不指定line-height有关系，因为源码中会获取line-height获取⾼度来判断显⽰省略号的；function getLineHeight(elem) {//计算⾼度var lh = computeStyle(elem, 'line-height');if (lh == 'normal') {//如果DOM 节点没有指定line-height 那么IE会输出默认的normal ⽕狐会输出22pxlh = parseInt(computeStyle(elem, 'font-size')) * 1.2;}return parseInt(lh);}如果没有指定⾏⾼，IE下⾯computeStyle(elem, 'line-height');就会返回 nomal。
CSS省略号text-overflow超出溢出显示省略号
CSS省略号text-overflow超出溢出显示省略号DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程篇有时为了避免文本文字内容超出一定宽度后溢出，我们想要溢出的部分不显示但用省略号（...）显示，这个时候我们可以使用CSS text-overflow文本溢出省略号属性样式实现。
一、text-overflow省略号样式语法结构text-overflow语法：text-overflow : clip | ellipsistext-overflow参数值和解释：clip : 不显示省略标记（...），而是简单的裁切ellipsis : 当对象内文本溢出时显示省略标记（...）text-overflow应用说明：CSS text-overflow设置或检索是否使用一个省略号标记（...）标示对象内文本文字的溢出。
要想实现显示不完内容将显示省略号代替，还需要html nobr标签完成（nobr 禁止换行标签）二、text-overflow应用案例常常遇到文章标题列表布局排版时候，有的标题比较长显示不完，这个时候即又不想换行显示，又想显示不完的内容自动出现省略号样式。
显示不完内容省略号替代截图显示不完的文字内容通过css显示省略号1、实现方法1）、对象设置text-overflow:ellipsis;省略号样式2）、使用nobr标签，强制让内容不换行（css换行、css不换行）。
2、案例描述我们假设3个标题的li列表布局，对li对象设置一定宽度和高度，对前两个li列表内容放过多测试文字，第三个li列表放入可显示完测试文字。
因为我们要避免内容过多撑破对象，所以我们对li再设一个overflow:hidden css样式，用于css隐藏超出内容，避免内容过多溢出li对象。
3、完整css+div的html源代码：以上用到CSS样式，如有不会可以进入学习1）、css margin2)、css margin-left3)、css margin-right4、css padding5)、css font-size字体大小6）、css 字体颜色color7)、css border边框8）、css line-height行高9）、css宽度10、html nobr标签4、css省略号布局实例截图过多文字li标签出现使用css省略号样式截图使用text-overflow样式让显示不完内容通过css实现省略号排版三、text-overflow省略号样式总结要想隐藏溢出内容同时又想让过多内容以省略号样式显示，需要用到css overflow,和text-overflow样式，同时避免文字自动换行我们使用html nobr标签强制内容不换行，使用使用注意这几个CSS样式和HTML标签配合使用才能达到多余文字内容出现省略号样式，大家下来灵活运用多次实践即可。
CSS3文本溢出显示省略号
CSS3⽂本溢出显⽰省略号
CCS3属性之text-overflow:ellipsis;的⽤法和注意之处
语法：
text-overflow：clip | ellipsis
默认值：clip
适⽤于：所有元素
clip：当对象内⽂本溢出时不显⽰省略标记（...），⽽是将溢出的部分裁切掉。
ellipsis：当对象内⽂本溢出时显⽰省略标记（...）。
更多参考：
在使⽤的时候，有时候发现不会出现省略标记效果，经过测试发现，使⽤ellipsis的时候，必须配合overflow:hidden; white-space:nowrap; width:200px;这三个样式共同使⽤才会有效果，⽰例代码：
<style type="text/css">
.test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:360px;}
</style>
<div class="test">欢迎光临<a href="/">何问起</a>! css3实现⽂本溢出显⽰省略号。
<a href="/">Midi下载</a></div>查看效果：
练习题：
:。
css内容过长显示省略号的几种解决方法
css内容过长显⽰省略号的⼏种解决⽅法单⾏⽂本（⽅法⼀）：语法：text-overflow : clip | ellipsis参数：clip : 不显⽰省略标记（...），⽽是简单的裁切 （clip这个参数是不常⽤的！）ellipsis : 当对象内⽂本溢出时显⽰省略标记（...） 说明： 设置或检索是否使⽤⼀个省略标记（...）标⽰对象内⽂本的溢出。
最⼤的缺点：text-overflow:ellipsis属性在FF中是没有效果的。
1/* 内容过长显⽰成省略号（内容显⽰为⼀⾏） */2 white-space: nowrap;/*设置不换⾏*/3 overflow: hidden; /*设置隐藏*/4 text-overflow: ellipsis; /*设置隐藏部分为省略号*/多⾏⽂本（⽅法⼆）：WebKit浏览器或移动端的页⾯：在WebKit浏览器或移动端（绝⼤部分是WebKit内核的浏览器）的页⾯实现⽐较简单，可以直接使⽤WebKit的css扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是⼀个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
-webkit-line-clamp⽤来限制在⼀个块元素显⽰的⽂本的⾏数。
为了实现该效果，它需要组合其他的WebKit属性1/* 内容过长显⽰两⾏，多余为省略号 */2 text-overflow:ellipsis;/*设置隐藏部分为省略号*/3 overflow: hidden;/*设置隐藏*/4 display: -webkit-box;5 -webkit-line-clamp: 2;/*设置显⽰⾏数，此处为2⾏，可设置其他数字*/6 -webkit-box-orient: vertical;这个属性⽐较合适WebKit浏览器或移动端（绝⼤部分是WebKit内核的）浏览器。
text-overflow文字溢出显示省略号问题
text-overflow⽂字溢出显⽰省略号问题很多⼩编写代码的时候会遇到⼀⾏或多⾏超出部分想显⽰省略号不知道怎么下⼿了，我们也知道属性text-overflow，但不知道什么设置能够达到想要的效果，text-overflow属性我就不⼀⼀介绍了，可以去查看，先看效果：⽆⾮是这两种效果，⼀种单⾏，⼀种多⾏。
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<title>溢出效果</title>6</head>7<style type="text/css">8.text-overflow-one{9 width: 100px;10 background-color: #00FFFF;11 overflow: hidden;12 text-overflow: ellipsis;13 white-space: nowrap;14 }15.text-overflow-two{16 width: 100px;17 background-color: #00FFFF;18 text-overflow: ellipsis;19 overflow: hidden;20 display: -webkit-box;21 -webkit-line-clamp: 2;22 -webkit-box-orient: vertical;23 }24</style>25<body>2627<p class="text-overflow-one">⼀⾏⽂本多余会显⽰省略号的</p>2829<p class="text-overflow-two">多⾏⽂本多余会显⽰省略号的</p>303132</body>33</html>通过上⾯的css，常见的⼀⾏中超出⽂本宽度的内容⽤省略号，设置text-overflow:ellipsis;后还要设置 overflow:hidden; white-space:nowrap;，当设置了text-overflow属性后，要同时设置overflow和white属性，text-overflow才⽣效。
text-overflow详解（字体溢出加省略号）
text-overflow详解（字体溢出加省略号）首先我们来看看text-overflow的语法：语法：text-overflow : clip | ellipsis参数：clip : 不显示省略标记（...），而是简单的裁切ellipsis : 当对象内文本溢出时显示省略标记（...）说明：设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
text-overflow:ellipsis属性在FF中是没有效果的。
示例：div { text-overflow : clip; }关于text-overflow属性如何应用，我们作如下的说明讲解：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。
并不具备其它的样式属性定义。
我们想要实现溢出时产生省略号的效果。
还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。
只有这样才能实现溢出文本显示省略号的效果。
所以只要在css样式中同时应用： text-overflow:ellipsis; white- space:nowrap; overflow:hidden; 就实现了所想要得到的溢出文本显示省略号效果只加一种，或两种，是不成功的。
我不知道为什么text-overflow一直是一个不常用的样式，其实它完全可以代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，具体的实现如下：程序代码<style>.title_list a {width:200px;font-size:12px;text-decoration:none;line-height:24px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}</style><ul class="title_list"><li><a href="#">环法官员斥责肮脏可耻行为</a></li><li><a href="#">钢巴借主场之利信心十足实德欲更进一步捧杯而归</a></li><li><a href="#">中锋时代在梦之队没落梦系列风光不再症结所在</a></li></ul>。
CSS和JS实现文本溢出显示省略号
CSS和JS实现⽂本溢出显⽰省略号本⽂记录实现⽂本溢出显⽰省略号的⼏种⽅式。
单⾏⽂本三⾏CSS代码实现：overflow: hidden; // ⽂本溢出隐藏text-overflow: ellipsis; // 显⽰省略号white-space: nowrap; // 设置⽂本不换⾏注意：设置⽂本溢出显⽰省略号时必须有宽度 width；必须要设置display属性为line-block/block,设置为其他值不⽣效。
多⾏⽂本1. CSS代码实现这种⽅式⽤于webkit浏览器或者移动端页⾯中。
具体例⼦如下：<div class="box"><p class="textEllipsis">这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字</p></div><style>box {width: 200px;background-color: #ccc;}.textEllipsis{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; /*显⽰的⾏数*/overflow: hidden;word-break:break-all; /*可择*/}</style>在未设置.textEllipsis样式之前⽂本如上图显⽰。
设置.textEllipsis样式之后，如下图显⽰。
显⽰两⾏，可以通过设置-webkit-line-clamp的属性值来控制显⽰的⾏数。
word-break: break-all;所有的都换⾏，不留⼀点空隙的换⾏。
如下图所⽰。
2. ⾮webkit浏览器可以通过css样式技巧实现。
实例如下：<div class="box"><p class="textEllipsis">这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字这是⼀段⽂字</p></div><style>.box {width: 200px;background-color: #ccc;}.textEllipsis {position: relative;line-height: 20px;height: 60px; /*height⾼度正好是line-height的n倍*/overflow: hidden;border: #5D5D5D solid 1px;word-break: break-all;}.textEllipsis::after {content: "…";position: absolute;bottom: 0;right: 0;width: 17px;padding-left: 33px;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%);}效果图如下，感觉不是很美观，但也是⼀种实现⽅式。
css文本换行文本溢出隐藏用省略号表示剩下内容
css⽂本换⾏⽂本溢出隐藏⽤省略号表⽰剩下内容正常⽂本的显⽰<style>p{width: 300px;box-shadow: 0 0 10px #ccc;padding: 0 20px;margin: 20px 100px;}</style><p>⼿指轻轻敲打着键盘，⼀句句，⼀⾏⾏，⼀段段，敲得都是些牵挂，都是些痴缠，是不是因为封存在⼼底的那抹温柔，还没泯灭，才会⼀次次敲下这些落寞的字迹。
</p>强制不换⾏<style>p{width: 300px;box-shadow: 0 0 10px #ccc;padding: 0 20px;margin: 20px 100px;white-space: nowrap;}</style><p>⼿指轻轻敲打着键盘，⼀句句，⼀⾏⾏，⼀段段，敲得都是些牵挂，都是些痴缠，是不是因为封存在⼼底的那抹温柔，还没泯灭，才会⼀次次敲下这些落寞的字迹。
</p>溢出隐藏并⽤省略号表⽰<style>p{width: 300px;box-shadow: 0 0 10px #ccc;padding: 0 20px;margin: 20px 100px;white-space: nowrap; /* 不换⾏ */overflow: hidden; /* 溢出隐藏 */text-overflow: ellipsis; /* 溢出内容由省略号表⽰ */}</style><p>⼿指轻轻敲打着键盘，⼀句句，⼀⾏⾏，⼀段段，敲得都是些牵挂，都是些痴缠，是不是因为封存在⼼底的那抹温柔，还没泯灭，才会⼀次次敲下这些落寞的字迹。
</p>设置⽂本⾏数溢出隐藏<style>p{width: 300px;box-shadow: 0 0 10px #ccc;padding: 0 20px;margin: 20px 100px;word-break: break-all;display: -webkit-box;-webkit-line-clamp: 3; /* 指定⾏数*/-webkit-box-orient: vertical;overflow: hidden;}</style><p>⼿指轻轻敲打着键盘，⼀句句，⼀⾏⾏，⼀段段，敲得都是些牵挂，都是些痴缠，是不是因为封存在⼼底的那抹温柔，还没泯灭，才会⼀次次敲下这些落寞的字迹。
css控制显示行数，多出部分显示省略号
css控制显⽰⾏数，多出部分显⽰省略号 webkit-line-clamp:number;控制⾏数，是⼀个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的WebKit属性。
常见结合属性： display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒⼦模型显⽰。
-webkit-box-orient:vertical;控制⽂本⾏数的⽅向，这是⼀个必须结合的属性，设置或检索伸缩盒对象的⼦元素的排列⽅式。
text-overflow:ellipsis;，可以⽤来多⾏⽂本的情况下，⽤省略号“...”隐藏超出范围的⽂本。
overflow:hidden;超出部分隐藏。
这个控制⾏数的⽅式出现的省略号在宽度和字体⾏数宽度刚好相近边缘时，样式不受hover控制，解决⽅法是通过js动态控制display属性。
⽐如1,$('div').on('mouseover',function(){ $(this).css("display","block").css("color","red").css("display","-webkit-box");})$('div').on('mouseleave',function(){ $(this).css("display","block").css("color","#333").css("display","-webkit-box");})2,改变字体⼤⼩，加⼀像素或者减⼀像素3，改变⽗盒⼦宽度。
CSS溢出文本省略（text-overflow）
CSS溢出⽂本省略（text-overflow）<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">dl{width:240px;border: solid 1px #ccc;}dt{padding:8px 8px;background: #7fecad;font-size: 13px;text-align: left;font-weight: bold;color: #71790c;margin-bottom: 12px;border-bottom: solid 1px #efefef;}dd{font-size: 0.78em;height: 1.5em;width: 220px;padding:2px 2px 2px 18px;margin:2px 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style></head><body><dl><dt>体育新闻</dt><dd>亚运会在韩国港⼝城市仁川开幕，韩国总统朴槿惠出席</dd><dd>在亚运会⾸⽇，韩国军团占据奖牌榜第⼀位</dd><dd>亚运游泳观战指南:21⽇开始孙朴5场对决中⽇⼤PK</dd><dd>亚运会在韩国港⼝城市仁川开幕，韩国总统朴槿惠出席</dd><dd>在亚运会⾸⽇，韩国军团占据奖牌榜第⼀位</dd><dd>亚运游泳观战指南:21⽇开始孙朴5场对决中⽇⼤PK</dd></dl></body></html>在CSS3中，text-overflow属性的基本语法如下：clip:表⽰不显⽰省略⽂本，简单的裁切。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
常常遇到文章标题列表布局排版时候，有的标题比较长显示不完，这个时候即又不想换行显示，又想显示不完的内容自动出现省略号样式。显示不完内容省略号1、实现方法
1）、对象设置text-overflow:ellipsis;省略号样式
2）、使用nobr标签，强制让内容不换行（css换行、css不换行）。
要想隐藏溢出内容同时又想让过多内容以省略号样式显示，需要用到css overflow,和text-overflow样式，同时避免文字自动换行我们使用html nobr标签强制内容不换行，使用使用注意这几个CSS样式和HTML标签配合使用才能达到多余文字内容出现省略号样式，大家下来灵活运用多次实践即可。
</ul>
</body>
</html>
以上用到CSS样式，如有不会可以进入学习
1）、css margin
2)、css margin-left
3)、css margin-right
4、css padding
5)、css font-size字体大小
6）、css 字体颜色color
text-overflow应用说明：
CSS text-overflow设置或检索是否使用一个省略号标记（...）标示对象内文本文字的溢出。
要想实现显示不完内容将显示省略号代替，还需要html nobr标签完成（nobr禁止换行标签）
二、text-overflow应用案例 - TOP
border-bottom:1px #ff8000 dashed;}
#divcss5 li a:hover{ color:#333}
/* css注释说明：为了便于截图、文章中能排版完整 所以css代码进行换行 不影响功能 */
</style>
</head>
<body>
<ul id="divcss5">
<style type="text/css">
*{ padding:0; margin:0}
a{ text-decoration:none;color:#6699ff}
ul,li{ list-style:none; text-align:left}
#divcss5{border:1px #ff8000 solid; padding:10px; width:150px;
<li><a href="#"><nobr>• 显示不完显示省略号，测试内容</nobr></a></li>
<li><a href="#"><nobr>• 第二排测试内容超出显示省</nobr></a></li>
<li><a href="#"><nobr>• 能显示完/li>
margin-left:10px; margin-top:10px}
#divcss5 li{width:150px;height:24px;line-height:24px; font-size:12px;
color:#6699ff;overflow:hidden;text-overflow:ellipsis;
一、text-overflow省略号样式语法结构 - TOP
text-overflow语法：
text-overflow : clip | ellipsis
text-overflow参数值和解释：
clip : 不显示省略标记（...），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（...）
3、完整css+div的html源代码：
<!DOCTYPE html>
<html xmlns="/1999/xhtml">
<head>
<title>text-overflow案例在线演示 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
CSS省略号text-overflow超出溢出显示省略号
DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程篇
有时为了避免文本文字内容超出一定宽度后溢出，我们想要溢出的部分不显示但用省略号（...）显示，这个时候我们可以使用CSS text-overflow文本溢出省略号属性样式实现。
2、案例描述
我们假设3个标题的li列表布局，对li对象设置一定宽度和高度，对前两个li列表内容放过多测试文字，第三个li列表放入可显示完测试文字。因为我们要避免内容过多撑破对象，所以我们对li再设一个overflow:hidden css样式，用于css隐藏超出内容，避免内容过多溢出li对象。
7)、css border边框
8）、css line-height行高
9）、css宽度
4、css省略号布局实例截图
过多文字li标签出现使用css省略号样式截图
使用text-overflow样式让显示不完内容通过css实现省略号排版
三、text-overflow省略号样式总结 - TOP