<!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 GCD 必读推荐，有关于单例使用问题

    链接如下:http://www.cocoachina.com/swift/20150129/11057.html 以前只注意使用dispatch_once达到创建单例对象时的线程安全,读了下边这篇文章 ...

  2. delphi XE5下安卓开发技巧

    delphi XE5下安卓开发技巧 一.手机快捷方式显示中文名称 project->options->Version Info-label(改成需要显示的中文名即可),但是需要安装到安卓手 ...

  3. 关于TxQBService报的错，腾讯你真牛B啊

    腾讯你真牛B啊,浏览器都7了,还特么的报这么低级的错误,还每10秒写一条windows日志,让人有什么心情用你的浏览器,滚.

  4. HTML 基础

    1.HTML  超文本标记语言 2.网页分类: 动态网页   静态网页 ①静态网页与动态网页区别:  主要:动态网页与数据库链接,静态网页不与数据库连接: ②静态网页 修改展示图片 必须修改源代码 : ...

  5. 【hadoop2.6.0】利用Hadoop的 Java API

    Hadoop2.6.0的所有Java API都在 http://hadoop.apache.org/docs/r2.6.0/api/overview-summary.html 里. 下面实现一个利用J ...

  6. HDU 1159 Common Subsequence --- DP入门之最长公共子序列

    题目链接 基础的最长公共子序列 #include <bits/stdc++.h> using namespace std; ; char c[maxn],d[maxn]; int dp[m ...

  7. LightOJ 1236 - Pairs Forming LCM（素因子分解）

    B - Pairs Forming LCM Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu ...

  8. linux日常易忘指令

    1.编辑全局指令 进入~/.bash_profile 增加"exprot +(启动文件的地址)" source ~/.bash_profilr(刷新) 2.修改mysql密码 my ...

  9. October 13th 2016 Week 42nd Thursday

    If the world seems cold to you, kindle fires to warm it. 若世界以寒相待,请点燃火堆以温暖相报. Kindle fires to warm th ...

  10. git 提交代码的流程

    [root@ok-T IT-DOC]# ls hx-海星-wifi.rd web收藏.txt [root@ok-T IT-DOC]# git status -s ?? "web\346\22 ...