聊城网站制作公司,聊城网站建设,聊城网站优化,聊城网络公司,聊城网站推广,聊城网站运营,聊城网络运营,聊城搜索引擎优化,聊城网页设计,聊城网站制作
 
 
公司拥有五年的网站建设经验,专业网站制作,推广及网站优化,有大量优秀客户案例
网站建设 | 设为首页 | 加入收藏 | 联系我们  
公告:热烈庆祝聊城精英网络2010版官方网站改版成功!
当前位置 :首页 > 网页知识  

CSS在页面中显示省略号text-overflow超出溢出显示省略号

http://www.55cp1.com   2014-3-22 11:43:40 来源:聊城做网站 作者:精英网络   人气:

DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程篇

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

一、text-overflow省略号样式语法结构 - TOPtext-overflow语法:
text-overflow : clip | ellipsis

text-overflow参数值和解释:
clip :  不显示省略标记(...),而是简单的?#20204;?
ellipsis :  当对象内文本溢出时显示省略标记(...)

text-overflow应用?#24471;鰨?
CSS text-overflow设置或检索是否使用一个省略号标记(...)标示对象内文本文字的溢出。

要想实现显示不完内容将显示省略号代替,还需要html nobr标签完成(nobr禁止换行标签)

二、text-overflow应用案例 - TOP常常遇到文章标题列表布局排版时候,有的标题比较长显示不完,这个时候?#20174;?#19981;想换行显示,又想显示不完的内容自动出现省略号样式。

显示不完内容省略号替代截图


显示不完的文字内容通过css显示省略号

1、实现方法
1)、对象设置text-overflow:ellipsis;省略号样式

2)、使用nobr标签,强制让内容不换行(css换行、css不换行)。

2、案例描述
我们假设3个标题的li列表布局,对li对象设置一定宽度和高度,对前两个li列表内容放过多测试文字,第三个li列表放入可显示完测试文字。因为我们要避免内容过多撑破对象,所以我们对li再设一个overflow:hidden css样式,用于css隐藏超出内容,避免内容过多溢出li对象。

完整css+div的html源代码:

以下是引用片段:
  • <!DOCTYPE html> 
  • <html xmlns="http://www.w3.org/1999/xhtml"> 
  • <head> 
  • <title>text-overflow案例在线演示 www.divcss5.com</title> 
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  • <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; 
  • 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; 
  • border-bottom:1px #ff8000 dashed;} 
  • #divcss5 li a:hover{ color:#333} 
  • /* css注释?#24471;鰨?#20026;了便于截图、文章中能排版完整 所以css代码进行换行 不影响功能 */ 
  • </style> 
  • </head> 
  • <body> 
  • <ul id="divcss5"> 
  • <li><a href="#"><nobr>&#8226; 显示不完显示省略号,测试内容</nobr></a></li> 
  • <li><a href="#"><nobr>&#8226; 第二排测试内容超出显示省</nobr></a></li> 
  • <li><a href="#"><nobr>&#8226; 能显示完几个字</nobr></a></li> 
  • </ul> 
  • </body> 
  • </html> 

  •  

    专业设计团队
    满足您的各种设计要求
    实力程序开发团队
    为您定制各种程序模块
    后台管理高效安全
    方便更新上传网站资料
    全球高速?#26790;?BR>无盲区、定制异地备份
    专业客服团队
    解决一切使用难题
    赠送大容量空间邮箱
    免费优化推广
       
    关于我们 | 工作机会 | 付款方式 | 网站制作 | 网页制作 | 网页设计 | 网络公司 | 联系我们 | 网站地图
    版权所有:聊城精英网络科技有限公司 © 2005-2010 All Rights Reserved.
    咨询专线:0635-6950368 技术专线:15192175820 在线QQ:312817927 1485871644
    地址:聊城市闸口科技市场 ?#26102;?252000 苏ICP备10112026号
    赖扬vs塔什干火车头比分
    重庆时时后2星走势图 安徽时时快3开奖 新时时彩历史开奖 天津11选5走势图手机版 山东11选5人工计划软件 11108cn最快开奖直播 赛车漏洞 美人捕鱼游戏 .老时时 vr3分彩走势图 新疆时时走势图4 内蒙古11选5开奖走势图 360重庆老时时走势图 2019074期双色球开奖结果 王中王六肖公开资料 cmd体育打水