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:nonetext-align:left}    
  10.     
  11. #divcss5{border:1px #ff8000 solidpadding:10pxwidth:150px;    
  12. margin-left:10pxmargin-top:10px}    
  13. #divcss5 li{width:150px;height:24px;line-height:24pxfont-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、实例演试:查询实例