zoukankan      html  css  js  c++  java
  • ellipsis

    语法: 
      text-overflow : clip | ellipsis 

    参数: 
      clip :  不显示省略标记(...),而是简单的裁切(clip这个参数是不常用的!)
          ellipsis :  当对象内文本溢出时显示省略标记(...)


    text-overflow
    我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50个汉字,而我们的列表可能只有300px的宽度。假如用标题截取函数,则标题不是完整的,假如我们用CSS样式text-overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。但是注意下面情况:
    一、仅定义text-overflow:ellipsis; 不能实现省略号效果

    二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果。

    三、同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    ul { width:300px; margin:30px auto; } li { line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } a { color:#03c; font-size:14px; } a:hover { color:#333; } </style> </head> <body> <ul> <li>同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li> <li>同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li> <li>同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li> <li>同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li> <li>同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li> </ul> </body> </html>


      
      

      

  • 相关阅读:
    Silverlight的依赖属性与附加属性(五)
    Silverlight Behavior技术(三)
    JQuery EasyUI 简单的左右布局左边Tree右边区域打开tab右键菜单实现 Murray
    使用Areas分离ASP.NET MVC项目(前后台以及对应功能模块) Murray
    IDisposable 接口 Murray
    MVC3/4 自定义HtmlHelper截断文本内容 Murray
    30个最常用css选择器解析(经典) Murray
    asp.net 中使用 SqlBulkCopy 将一个目录下指定类型的数据文件导入到数据库 Murray
    EntityState 枚举的5中状态的变化 Murray
    IEnumerable<T> 接口主要成员 Murray
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/5502500.html
Copyright © 2011-2022 走看看