<!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. ios cordite 读取错误CoreData could not fulfill a fault for '0x15b4a870

    解释在这里 http://stackoverflow.com/questions/14296892/nsobjectinaccessibleexception-reason-coredata-coul ...

  2. ACM/ICPC 之 模拟 (HNUOJ 13391-换瓶模拟)

    题意:汽水瓶有三个部分cap+plastic bottle+ label(瓶盖-瓶身-瓶底),给出数据:n为原瓶数,x,y,z为这三个部分可以用相应的数字换取新瓶子,求最大总瓶数. 模拟(暴力) // ...

  3. ffmpeg-20160522-git-bin

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

  4. nyoj739_笨蛋难题四

    笨蛋难题四 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 这些日子笨蛋一直研究股票,经过调研,终于发现xxx公司股票规律,更可喜的是 笨蛋推算出这家公司每天的股价, ...

  5. Enum:Fliptile(POJ 3279)

    Fliptile 题目大意:农夫想要测牛的智商,于是他把牛带到一个黑白格子的地,专门来踩格子看他们能不能把格子踩称全白 这一题其实就是一个枚举题,只是我们只用枚举第一行就可以了,因为这一题有点像开关一 ...

  6. WP开发资源

    wp开发:连续两次点击返回键退出程序的设计: http://hi.baidu.com/youngytj/item/6be317719cc371306cc37ce4 X http://www.cnblo ...

  7. 【python】入门学习（三）

    for循环 for i in range():   #注意冒号 range中默认从0开始 或者从指定的数字开始 到给定数字的前一个数字结束 递增递减皆是如此 for循环提供变量的自动初始化 for i ...

  8. python MethodType方法详解和使用

    python 中MethodType方法详解和使用 废话不多说,直接上代码 #!/usr/bin/python # -*-coding:utf-8-*- from types import Metho ...

  9. JS调用自定义弹窗【bootstrap】

    function commonConfirm(msg,call){ showConfirmBox("消息提示",msg,call); } $(document).on('click ...

  10. Android笔记：ListView

    listview属性 android:divider属性,可以指定ListView 分隔线的颜色,#0000 表示将分隔线设为透明色. listview效率的问题 adapter的三个参数int po ...