<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>css把超出的部分显示为省略号的方法兼容火狐</title>

<style>

* { margin: 0; padding: 0; }

a { text-decoration: none; color: #000; }

a:hover { text-decoration: none; color: #000; }

ul {

width: 300px;

margin: 40px auto;

padding: 12px 4px 12px 24px;

border: 1px solid #D4D4D4;

background: #F1F1F1;

}

li { margin: 12px 0; }

li a {

display: block;

width: 80px;

overflow: hidden;/*注意不要写在最后了*/

white-space: nowrap;

-o-text-overflow: ellipsis;

text-overflow: ellipsis;

}

/* firefox only */

li:not(p) {

clear: both;

}

li:not(p) a {

max-width: 170px;

float: left;

}

li:not(p):after {

content: "...";

float: left;

width: 25px;

padding-left: 5px;

color: #000;

}

</style>

</head>

<body>

<ul>

<li><a href="#">suntear的技术空间</a></li>

<li><a href="#">suntear的技术空间</a></li>

<li><a href="#">suntear的技术空间</a></li>

<li><a href="#">suntear的技术空间</a></li>

<li><a href="#">suntear的技术空间</a></li>

<li><a href="#">suntear的技术空间</a></li>

<li><a href="#">suntear的技术空间</a></li>

</ul>

</body>

</html>

　　

css把超出的部分显示为省略号的方法兼容火狐的更多相关文章

  1. css怎样让HTML中超出的内容显示为省略号

    文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法第一种.用程序开截取字符长度,这个其实也是可以的.第二种就是接下来分享的内容,用css样式来做,话也 ...

  2. 超出区域文字显示为省略号或者剪切效果——CSS的生僻操作

    每门语言总有那么一些不太常用,却又不可或缺的语法操作.下面说一下,在HTML文件中,如何设置用 "省略号" 和 "剪切" 代替大量文字的效果. 以下是HTML的 ...

  3. CSS移动端多行显示多余省略号

    /*css3 多行显示省略号,也可用于单行*/ .one-line { display: -webkit-box; overflow : hidden; text-overflow: ellipsis ...

  4. CSS文字超出指定长度，用省略号

    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display: block;

  5. css 文本超出容器长度后自动省略的方法!

    我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能! 而并没有获取光标提示的功能,所有小弟就结合网上的代 ...

  6. Node.js 加载静态资源css，js等不显示问题的解决方法

    一,原因 1,没有响应到css等文件 2,响应类型是由文件的后缀名决定 (1)html的请求头 Content-Type : text/html ; charset=utf-8 (2) CSS的请求头 ...

  7. css实现超出一行后用省略号显示

    css实现超出一行后用省略号显示 a{display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden ...

  8. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  9. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

随机推荐

  1. 饿了么 openapi demo

    http://merchant.openapi.eleme.io/merchant.html#id215 class Program { static void Main(string[] args) ...

  2. pip 安装命令

    pip官网文档 https://pip.pypa.io/en/latest/reference/pip.html 若没有将c:\Python27\Scripts加入到path环境变量,可以在c:\Py ...

  3. Unity3D研究院之Prefab里面的Prefab关联问题（转）

    转自http://www.xuanyusong.com/archives/3042 最近在做UI部分中遇到了这样的问题,就是Prefab里面预制了Prefab.可是在Unity里面一旦Prefab预制 ...

  4. javascript 搜索并高亮显示

    2015年12月22日 15:45:08 星期二 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者 ...

  5. 多字段 java对象排序

    public class ReflexUtil { static Logger logger = LoggerFactory.getLogger(ReflexUtil.class); //getMet ...

  6. ffmpeg-20160701-git-bin.7z

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 f ...

  7. Match:Cyclic Nacklace(KMP的next数组的高级应用)(HDU 3746)

    串珠子 题目大意:给定一个字串,要你找到如果要使之成为循环串,在末尾需要的最小的字数(只能添加字符,不能删减字符) 首先联动一下之前做过的动态规划问题POJ 3280,当然了3280这一题是用的LD, ...

  8. php 与 js 正则匹配

    php : <?php $str='<p>xxx</p>abc';$matches = array();if(preg_match('/<p>.*<\/ ...

  9. iOS 多线程及其他补充

      NSOperation NSOperation是个抽象类,并不具备封装操作的能力,必须使用它的子类 NSInvocationOperation 如果直接执行NSInvocationOperatio ...

  10. ASP.Net后台 实现先弹出对话框，再跳转到另一个网页的实现方法

    解决办法如下: Response.Write("<script>alert('想在对话框中显示的内容');window.navigate(‘要转到的页面的URL’)</sc ...