这个同时需要. text-overflow  ;  overflow  ;  white-space ; width ;  四个属性才可以.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css实现省略号</title>

    <style type="text/css">

        /***超出长度显示省略号. 还需要设置width**/

        .ellipsis {

            text-overflow: ellipsis;

            overflow: hidden;

            white-space: nowrap;

        }

        ul > li {

            border: 1px solid red;

            width: 200px;

        }

    </style>

</head>

<body>

    <ul>

        <li class="ellipsis" >测试一,测试一,测试一,测试一</li>

        <li class="ellipsis" >测试二</li>

        <li class="ellipsis" >测试三,测试三,测试三,测试三</li>

    </ul>

</body>

</html>

效果:

参考链接:

单行省略号纯css解决方案

CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程

css 实现省略号. text-overflow: ellipsis; 同时设置四个属性才可以.的更多相关文章

  1. css 文本省略号设置

    本文推荐2种方法. 1. css tip:只兼容chrome内核的浏览器.ff不支持. .box { overflow: hidden; /* 溢出时不显示溢出的内容 */ text-overflow ...

  2. CSS深入理解之overflow

    CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...

  3. css文本省略号

    这里记录下如何用CSS实现单行.多行文本溢出容器的时候用省略号代替溢出部分. 单行文本溢出容器时显示省略号的CSS实现方法 /* 规定当内容溢出元素框(容器)时隐藏 */ overflow: hidd ...

  4. 纯css实现省略号，兼容火狐，IE9，chrome

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  6. css 浮动问题 display显示 和 光标设置cursor

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>浮 ...

  7. CSS Animation triggers text rendering change in Safari

    薄荷新首页上周五内测,花哥反馈在 MacBook Safari 浏览器下 鼠标移动到第一个商品的时候后面几个商品的文字会加粗.这是什么鬼??? 待我回到家打开笔记本,鼠标蹭蹭蹭的发现问题远不止如此: ...

  8. radio，checkbox，select，input text获取值，设置哪个默认选中

    11 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...

  9. css文本样式text、字体样式font

    文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...

随机推荐

  1. FileZilla 客户端连接 FlieZilla 服务器 连接成功读取目录列表却失败的解决办法

    解决过程: 第一步: 第二步:

  2. bzoj3675

    题解:首先要明确一件事,就是当分割的方案固定时,无论先分割的哪一段,结果都是不变的,然后能列出dp方程:\(dp[i][j]=max(dp[k][j-1]+(a[i]-a[k])*(a[n]-a[i] ...

  3. 【转】预装Win8/8.1 中文版系统升级为专业版或专业版含媒体中心版的简单方法

    [转]预装Win8/8.1 中文版系统升级为专业版或专业版含媒体中心版的简单方法 原文地址:http://www.iruanmi.com/upgrade-win8-china-to-a-higher- ...

  4. Redis与memchache对比

    Redis是NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多,包括string.list.se ...

  5. Git的各种状态

    考:http://blog.csdn.net/wirelessqa/article/details/19548057 按照文件的存放位置分: 在你自建的Git本地仓库中,有三个区域:本地目录.暂存区. ...

  6. python中sys.argv[]的使用

    sys.argv[]主要用于程序从外部获取参数.其参数个数可以是多个,组建成一个列表(list). 几个简单示例如下: fun_test.py: #!/usr/bin/env python # -*- ...

  7. git相关知识（github，idea等的配置）

    本地git提交文件到github上: 1.在github上创建项目 2.使用git clone https://github.com/xxxxxxx/xxxxx.git克隆到本地 3.编辑项目 4.g ...

  8. 【LeetCode】成对交换节点

    e.g. 给定链表 1->2->3->4,返回 2->1->4->3 的头节点. 我写了个常见的从头节点遍历,少量的奇数个或偶数个数据都能成功重新排列.但链表过长时 ...

  9. git reset --hard 恢复

    git reset --hard ,再然后,悲剧上演~ 恢复方法: 使用 git reflog 来找到最近提交的信息,这里贴出部分信息: F:\voidy>git reflog WARNING: ...

  10. URL加载jar

    // !/test.xml 是表示jar中的test.xml文件 final URL jarUrl = new URL("jar:file:/C:/proj/parser/jar/parse ...