<!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. struts2 初步总结

    1.Struts2的概述: 2.Struts2的入门: * 2.1下载struts2的zip包. * 2.2创建web工程. * 2.3配置... 3.Struts2的开发流程: * 3.1流程: * ...

  2. android一句话搞定图片加载

    http://square.github.io/picasso/ Picasso.with(context).load("http://i.imgur.com/DvpvklR.png&quo ...

  3. EF没有同步更新（转）

    不知道这算不算一个bug,当你新建一个从数据库生成的edmx时,他能正确的生成所有的tt文件,但是当你从数据库更新表结构时,他不能正确的更新tt文件,以建立Model1.edmx为例,在解决方案中展开 ...

  4. SpringMVC java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name

    当跳转到一个含有form表单的页面的时候 如<form:form commandName="useCarInfo" 必须要new一个useCarInfo的同名实例给jsp来接 ...

  5. struts2拦截器+监听器 .

    一.拦截器是怎么实现: 实际上它是用Java中的动态代理来实现的 二.拦截器在Struts2中的应用 对于Struts2框架而言,正是大量的内置拦截器完成了大部分操作.像params拦截器将http请 ...

  6. iOS开发之Xcode 相对路径与绝对路径

    iOS开发之 相对路径与绝对路径 https://developer.apple.com/library/mac/documentation/DeveloperTools/Reference/Xcod ...

  7. supersr--九宫格公式(根据多少行多少列排版)

    - (void)layoutSubviews{ [super layoutSubviews]; NSUInteger count = self.subviews.count; NSInteger ma ...

  8. java Http原生 Get 和Post 支持代理认证

    import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader; import ...

  9. Mysql之INFORMATION_SCHEMA解析1

    INFORMATION_SCHEMA库是Mysql提供的一个系统库,保存了数据库的原数据,方便用户监控与管理Msyql. 现在单说与INNODB相关的库:INNODB_SYS_TABLES,INNOD ...

  10. HBase参数配置及说明（转）

    版本:0.94-cdh4.2.1 hbase-site.xml配置 hbase.tmp.dir 本地文件系统tmp目录,一般配置成local模式的设置一下,但是最好还是需要设置一下,因为很多文件都会默 ...