网页制作

CSS省略号text-overflow超出溢出显示省略号
网页制作 2024/11/15 佚名
3 2

复制代码代码如下:
<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis"> <NOBR>就是比如有一行文字，很长，表格内一行显示不下</NOBR></DIV><DIV STYLE="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis"> 就是比如有一行文字，很长，表格内一行显示不下.</DIV>


有时为了避免文本文字内容超出一定宽度后溢出，我们想要溢出的部分不显示但用省略号（...）显示，这个时候我们可以使用CSS text-overflow文本溢出省略号属性样式实现。

一、text-overflow省略号样式语法结构

text-overflow语法：
text-overflow : clip | ellipsis

text-overflow参数值和解释：
clip : 　不显示省略标记（...），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（...）

text-overflow应用说明：

CSS text-overflow设置或检索是否使用一个省略号标记（...）标示对象内文本文字的溢出。
要想实现显示不完内容将显示省略号代替，还需要html nobr标签完成（nobr禁止换行标签）

二、text-overflow应用案例

常常遇到文章标题列表布局排版时候，有的标题比较长显示不完，这个时候即又不想换行显示，又想显示不完的内容自动出现省略号样式。
显示不完内容省略号替代截图
CSS省略号text-overflow超出溢出显示省略号
显示css省略号

显示不完的文字内容通过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 Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4. <title>text-overflow案例在线演示 www.jb51.net</title>    
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  6. <style type="text/css">    
  7. *{ padding:0; margin:0}    
  8. a{ text-decoration:none;color:#6699ff}    
  9. ul,li{ list-style:none; text-align:left}    
  10.     
  11. #divcss5{border:1px #ff8000 solid; padding:10px; width:150px;    
  12. margin-left:10px; margin-top:10px}    
  13. #divcss5 li{width:150px;height:24px;line-height:24px; font-size:12px;    
  14. color:#6699ff;overflow:hidden;text-overflow:ellipsis;    
  15. border-bottom:1px #ff8000 dashed;}    
  16. #divcss5 li a:hover{ color:#333}    
  17. /* css注释说明：为了便于截图、文章中能排版完整 所以css代码进行换行 不影响功能 */    
  18. </style>    
  19. </head>    
  20. <body>    
  21. <ul id="divcss5">    
  22. <li><a href="#"><nobr>#8226; 显示不完显示省略号，测试内容</nobr></a></li>    
  23. <li><a href="#"><nobr>#8226; 第二排测试内容超出显示省</nobr></a></li>    
  24. <li><a href="#"><nobr>#8226; 能显示完几个字</nobr></a></li>    
  25. </ul>    
  26. </body>    
  27. </html>   
4、css省略号布局实例截图

过多文字li标签出现使用css省略号样式截图

CSS省略号text-overflow超出溢出显示省略号

使用text-overflow样式让显示不完内容通过css实现省略号排版

三、text-overflow省略号样式总结

要想隐藏溢出内容同时又想让过多内容以省略号样式显示，需要用到css overflow,和text-overflow样式，同时避免文字自动换行我们使用html nobr标签强制内容不换行，使用使用注意这几个CSS样式和HTML标签配合使用才能达到多余文字内容出现省略号样式，大家下来灵活运用多次实践即可。

1、案例演示：查看案例
标签：
文字部分,省略号
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com