html使用css让文字超出部分用省略号三个点显示的方法:

  我正确使用的就是下面的代码,li里面是a标记。在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测

  li{

  display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;

  }

  直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了。

  语法:

  text-overflow : clip | ellipsis

  参数:

  clip :  不显示省略标记(...),而是简单的裁切

  (clip这个参数是不常用的!)

  ellipsis :  当对象内文本溢出时显示省略标记(...)

  说明:

  设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

  请您注意,text-overflow:ellipsis属性在FF中是没有效果的。

  示例:

  div { text-overflow : clip; }

  text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50 个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text- overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。

  text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样 才能实现溢出文本显示省略号的效果。

示例:

修改前效果:

修改以后效果:

html使用css让文字超出部分用省略号三个点显示的方法案例的更多相关文章

  1. html使用css让文字多行超出部分用省略号三个点显示的方法案例

    text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-w ...

  2. 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  3. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

  4. Css解决表格超出部分用省略号显示

    小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...

  5. css 实现文字过长变成省略号(包含单行的and多行的)

    单行的比较简单  但是必须条件同时满足 <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: ...

  6. css中文字超出文本框,溢出部分用点点点表示

        text-overflow 属性规定当文本溢出包含元素时发生的事情.我们可以使用它来对文本超出的部分进行样式的处理. text-overflow: clip|ellipsis|string;包 ...

  7. CSS解决文字超出显示省略号问题

    超出一行 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 超出多行 overflow: hidden; text-ove ...

  8. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  9. CSS样式-文字超出宽部分用省略号代替

    .name {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display:block;width:120px;    }

随机推荐

  1. ruby cloud9部署到heroku

    Cloud9网址:https://c9.io/ 使用github账号登陆,如果没有,现在github(https://github.com/)上注册一个用户,在进行登陆.

  2. Java线上应用故障排查

    线上故障主要2种: CPU利用率很高, 内存占用率很大 一.CPU利用率很高 1. top查询那个进程CPU使用率高 2. 显示进程列表 ps -mp pid -o THREAD,tid,time 找 ...

  3. LeetCode(36)Valid Sudoku

    题目 Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could ...

  4. [bzoj1058][ZJOI2007][报表统计] (STL)

    Description 小Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工 作,作为她的生日礼物之一.经过仔细观察,小Q发现统计一张报表实际上是维护一个 ...

  5. ..net 3.5新特性之用this关键字为类添加扩展方法

    具体用法如下: public static class ClassHelper { //用this 声明将要吧这个方法附加到Student对象 public static bool CheckName ...

  6. MVC系统学习7—Action的选择过程

    在Mvc源码的ControllerActionInvoker的InvokeAction方法里面有一个FindAction方法,FindAction方法在ControllerDescriptor里面定义 ...

  7. css3 & background & background-image

    css3 & background & background-image https://developer.mozilla.org/en-US/docs/Web/CSS/backgr ...

  8. restful(2):视图

    视图部分小结: # as_view()中的参数:利用参数(一个字典)来指定什么方式用什么方法来执行(哪种请求方式由哪种内部方法来执行) # 例如 Retrieve时,需要在对应的url中添加有名分组 ...

  9. Android 4.4.2上与BLE 蓝牙锁设备的通讯

    Android从4.3(Api level 18)开始支持BLE的开发,本文记录了Android 4.4.2设备与BLE设备通讯的流程. 权限需求: <uses-permission andro ...

  10. POJ1276 Cash Machine

    Time Limit: 1000MS   Memory Limit: 10000KB   64bit IO Format: %lld & %llu Description A Bank pla ...