这个同时需要. 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. 启动adb devices，报adb已停止工作

    1.winddows下,一般是由于adb默认的”5037“被其他应用占用导致的(手机助手或者360居多) 2.cmd 下 netstat -ano |find "5037"查找占用 ...

  2. 2-SET 前缀优化建图

    1, Duff in Mafia CodeForces - 587D 2, Ants CodeForces - 1007D

  3. 安卓——implements——OnClickListener

    //实现底部的按钮激活监听 设置不同src class click implements OnClickListener{ @Override public void onClick(View v) ...

  4. sharding-jdbc读写分离原理解读

    原帖地址:https://blog.csdn.net/yanyan19880509/article/details/78170233 前言 很多时候,为了应付DB的高并发读写,我们会采用读写分离技术. ...

  5. [codechef July Challenge 2017] Chef and Sign Sequences

    CHEFSIGN: 大厨与符号序列题目描述大厨昨天捡到了一个奇怪的字符串 s,这是一个仅包含‘<’.‘=’和‘>’三种比较符号的字符串.记字符串长度为 N,大厨想要在字符串的开头.结尾,和 ...

  6. C++ leetcode::Reverse Integer

    第一天上课,数据库老师说对于计算机系的学生,凡是在课本上学到的专业知识都是过时的.深以为然,感觉大学两年半真的不知道学了什么,为未来感到担忧,C++也不敢说是精通,入门还差不多.最近丧的不行,不管怎么 ...

  7. Linux tar压缩命令 排除某个目录 (根据man tar 总结)

    一般直接用tar命令打包很简单,直接使用 tar -zcvf test.tar.gz test 即可. 在很多时候,我们要对某一个目录打包,而这个目录下有几十个子目录和子文件,我们需要在打包的时候排除 ...

  8. weblogic创建domain教程

    1.创建domain [ls@ls ~]$ cd /weblogic/wlserver_10.3/common/bin/ #进入创建文件所在目录 [ls@ls bin]$ ./config.sh #执 ...

  9. /etc/profile、~/.bash_profile、~/.bashrc和/etc/bashrc

    文件 引用关系 执行时间 影响用户 使用场景 /etc/profile   开机执行 所有用户 所有用户.重启生效 ~/.bash_profile 引用~/.bashrc 用户登录时执行 当前用户 当 ...

  10. Qt画笔实现波形区域图

    参考文章:https://blog.csdn.net/yuxing55555/article/details/79752978 效果图: void WareArea::paintEvent(QPain ...