<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" mrc="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: 280px;height:126px; margin: 38px auto;padding: 12px 6px 12px 22px;border: 1px solid #CCC;background: #EEE;}

li { margin: 12px 0; }

li a {display: block;width: 168px;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: 172px;float: left;}

li:not(p):after {mrc: "...";float: left;width: 25px;padding-left: 5px;color: #000;}

</style>

</head>





<body>

<ul>

<li><a href="/soft/3149.shtml" target="_blank">显示内容1,显示内容1,显示内容1,显示内容1</a></li><li><a href="/soft/3148.shtml" target="_blank">显示内容2,显示内容2,显示内容2,





显示内容2</a></li><li><a href="/soft/3147.shtml" target="_blank">显示内容3,显示内容3,显示内容3,显示内容3</a></li><li><a href="/soft/3144.shtml" target="_blank">显示内容4,





显示内容4,显示内容4,显示内容4,显示内容4</a></li>

</ul>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

CSS控制LI行字符溢出用省略号取代的更多相关文章

  1. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  2. 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  3. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  4. CSS控制文字，超出部分显示省略号

    http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: now ...

  5. css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  6. css 多行文本的溢出显示省略号(移动端)

    多行文本的溢出显示省略号(移动端) 一.单行文本的溢出显示省略号(通用) .mui-ellipsis { overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-s ...

  7. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  8. css实现多行文本溢出显示省略号(…)

    WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit- ...

  9. css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...

随机推荐

  1. YZOI回忆录&&YZOI3.0介绍&&某些资源的分享

    “那段时光就像块透明的琉璃,美得那么虚幻.飘渺.可是它毕竟在我生命里闪现,哪怕如萤光一样微弱,却照亮了我整个心房.”1.前序伴随着yzoi2.0版本离我而去的是我半年的OI生涯,在这半年内我步入了一个 ...

  2. 百度分享 ajax 或分页后显示不出问题解决方案

    自从用了AJAX后,JS重新加载问题就如家常便饭般层出不穷啊.没有系统学习过js感觉亚历山大. 百度后,还是找到了解决办法. 百度分享创建了一个全局对象window._bd_share_main.通过 ...

  3. cocod2d-x 之 CCDirector、CCScene、CCSprite

    CCDirector是控制游戏流程的主要组件. typedef enum { /// sets a 2D projection (orthogonal projection)2D投机模式 kCCDir ...

  4. Js设置所有连接是触发/swt/的代码

    Js设置所有连接是触发/swt/的代码 代码为: <script> var doca=document.getElementsByTagName('a'); for(var i=0;i&l ...

  5. Cookie的基本使用

    1, 如何创建cookie <?php //创建cookie信息 //这个函数用于保存cookie //第一个参数,表示cookie一个key,第二个表示val,第三个表示cookie值,在客户 ...

  6. bzoj2096: [Poi2010]Pilots

    Description Tz又耍畸形了!!他要当飞行员,他拿到了一个飞行员测试难度序列,他设定了一个难度差的最大值,在序列中他想找到一个最长的子串,任意两个难度差不会超过他设定的最大值.耍畸形一个人是 ...

  7. java枚举小结

    如何定义一个枚举类? //定义了4个等级 enum Level{ A,B,C,D } 枚举类的实质: class Level{ public static final Level A = new Le ...

  8. Sphnix创建文档

    http://www.ibm.com/developerworks/cn/opensource/os-sphinx-documentation/ Oracle实例名和服务名

  9. 【HDOJ】2896 病毒侵袭

    AC自动机模板题. #include <iostream> #include <cstdio> #include <cstring> #include <qu ...

  10. sql按照in中的顺序进行排序 mysql

    经测试以下三种情况,都可以. SELECT a.id,a.name as goods_name,a.logoimg,b.name as store_name FROM sh_goods a LEFT ...