CSS省略号text

日期：2021-03-13 类型：科技新闻 

关键词：网页设计，移动端网页设计，大一网页设计作业成品，网页编辑软件，网页在线编辑


拷贝编码
编码以下:

<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis"> <NOBR>便是例如有1写作字，很长，报表内1行显示信息不下</NOBR></DIV><DIV STYLE="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis"> 便是例如有1写作字，很长，报表内1行显示信息不下.</DIV>


有时以便防止文字文本內容超过1定宽度后外溢，大家要想外溢的一部分无法显示但用省略号（...）显示信息，这个情况下大家可使用CSS text-overflow文字外溢省略号特性款式完成。

1、text-overflow省略号款式英语的语法构造

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

text-overflow主要参数值调解释：
clip : 　无法显示省略标识（...），而是简易的裁剪
ellipsis : 　当目标内文字外溢时显示信息省略标识（...）

text-overflow运用表明：

CSS text-overflow设定或查找是不是应用1个省略号标识（...）标识目标内文字文本的外溢。
要想完成显示信息不完內容将显示信息省略号替代，还必须html nobr标识进行（nobr严禁换行标识）

2、text-overflow运用实例

经常遇到文章内容题目目录合理布局排版情况下，有的题目较为长显示信息不完，这个情况下即又不想换行显示信息，又想显示信息不完的內容全自动出現省略号款式。
显示信息不完內容省略号取代截图

显示信息css省略号

显示信息不完的文本內容根据css显示信息省略号

1、完成方式

1）、目标设定text-overflow:ellipsis;省略号款式
2）、应用nobr标识，强制性让內容不换行（css换行、css不换行）。

2、实例叙述
大家假定3个题目的li目录合理布局，对li目标设定1定宽度和高宽比，对前两个li目录內容放过量检测文本，第3个li目录放入可显示信息完检测文本。由于大家要防止內容过量撑破目标，因此大家对li再设1个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⑻" />    
  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; 第2排检测內容超过显示信息省</nobr></a></li>    
  24. <li><a href="#"><nobr>#8226; 能显示信息完几个字</nobr></a></li>    
  25. </ul>    
  26. </body>    
  27. </html>   
4、css省略号合理布局案例截图

过量文本li标识出現应用css省略号款式截图



应用text-overflow款式让显示信息不完內容根据css完成省略号排版

3、text-overflow省略号款式总结

要想掩藏外溢內容另外又想让过量內容以省略号款式显示信息，必须用到css overflow,和text-overflow款式，另外防止文本全自动换行大家应用html nobr标识强制性內容不换行，应用应用留意这几个CSS款式和HTML标识相互配合应用才可以做到过剩文本內容出現省略号款式，大伙儿下来灵便应用数次实践活动便可。

1、实例演试：查询实例
上一篇：企业网站建设实际效果好要考虑什么标准 返回下一篇：没有了