您现在的位置是:网站首页>网站制作心得CSS3|HTML5

css控制文本内容超过长度显示省略号

2019-06-27来源: CSS3|HTML5 人已围观

简介表格数据通过后台动态读取,结果内容太长折行显示,使得页面显示不友好,我当然不能听之任之,于是,通过css控制,当内容超过设定宽度后自动显示为省略号,为了易用性考虑,给表格加了title属性,这样鼠标放上去,内容就全部浮现显示

未处理前,当div内容超过长度后,换行显示:070淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
文本内容过长显示省略号070淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
070淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
处理方法:070淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
1.固定div宽度;070淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
2.增加样式overflow: hidden;text-overflow:ellipsis;white-space: nowrap;070淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
3.建议给div增加title,用来浮显显示。 070淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
070淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
代码如下:
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>css控制文本内容超过长度显示省略号</title>
  6.     <style type="text/css">
  7.         .system1{
  8.             width:80px;/*必须给定固定宽度*/
  9.             overflow: hidden;/*表示超过宽度的内容会被修剪*/
  10.             text-overflow:ellipsis;/*显示省略符号来代表被修剪的文本*/
  11.             white-space: nowrap;/*文本内容不换行显示*/
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="system1" title="css控制文本内容超过长度显示省略号">css控制文本内容超过长度显示省略号</div>
  17. </body>
  18. </html>
  19.  

 070淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

运行后,效果如下,如果需要看到全部文字,只需要把鼠标放在文字上面即可:070淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
070淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

很赞哦! ()

猜您喜欢

付费说明

    1、安装cms后台,费用是300,基础费用300包括后台调试以及页面模板修改.

    2、请加我个人微信 634626966,或者扫一扫微信二维码。备注“网站”

    3、系统安装只限定于帝国cms,并且支持php,虚拟主机,请选择linux系统

    4、静态页面,是指html页面,不能直接使用在dede,帝国CMS,wordpress,phpcms等常用的建站系统。

    5、【收费说明】制作企业网站,我是这么收费的!

文章评论

站点信息