<!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. DataTemplate应用

    在WPF中,决定数据外观的是DataTemplate,即DataTemplate是数据内容的表现形式,一条数据显示成什么样子,是简单的文本还是直观的图形,就是由DataTemplate决定的.下面通过 ...

  2. 如何为自己的windows 8系统的电脑更换锁屏壁纸

    现在的人都喜欢个性,今天教大家如何设置自己想要的锁屏壁纸 工具/原料 Windows 8系统的笔记本电脑 方法/步骤   将鼠标移到电脑的右下方,点击设置按钮进入设置页面   找到更改电脑设置并点击进 ...

  3. event.srcElement 用法笔记e.target

    event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称. 注意获取的标记都以大写表示,如"TD",&q ...

  4. 【leetcode】Reverse Linked List II （middle）

    Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1-> ...

  5. PHP如何随机获取一个二维数组中的一个值

    获取一个数组: $awardid_list=pdo_fetchall('select id from '.tablename($this->table_award)); 这是微擎的写法哈,意思就 ...

  6. 素数环（dfs+回溯）

    题目描述: 输入正整数n,把整数1,2...n组成一个环,使得相邻两个数和为素数.输出时从整数1开始逆时针排列并且不能重复: 例样输入: 6 例样输出: 1 4 3 2 5 6 1 6 5 2 3 4 ...

  7. Swift - 初始化Initialization

    Ps:苹果官方文档-Initialization 自定义控件初始化中常见的几种错误(指定构造器和便利构造器)截图:   意思是:1.没有添加重写符override(重写父类方法)2.没有重写initW ...

  8. NYOJ题目813对决

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAssAAALRCAIAAAAiJ3lxAAAgAElEQVR4nO3dPW7jSgMu6LsJ516IYy

  9. mysql 三个表连接查询

    权限表(permission)10 字段名称 类型 约束 描述 authorityid integer Pk not null 权限流水号id    PK userNameId int not nul ...

  10. 动手动脑及java程序之用消息框进行数的运算

        动手动脑     自信成就人生 动手动脑1 ✿仔细阅读示例: EnumTest.java,运行它,分析运行结果? package demo; public class Test { publi ...