这个同时需要. 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. spring boot(十八)集成FastDFS文件上传下载

    上篇文章介绍了如何使用Spring Boot上传文件,这篇文章我们介绍如何使用Spring Boot将文件上传到分布式文件系统FastDFS中. 这个项目会在上一个项目的基础上进行构建. 1.pom包 ...

  2. 【oauth2.0】【2】JAVA 客户端模式

    含义:用户直接向客户端注册,客户端以自己的名义要求"服务提供商"提供服务,其实不存在授权问题 步骤: (A)客户端向认证服务器进行身份认证,并要求一个访问令牌(token). (B ...

  3. 字符串加密解密（Base64）

    var Base64 = { // private property _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwx ...

  4. h5网页跳转到app，若未安装app，则跳转app下载页面

    if(isAndroid){ android(); function android(){ var ifr = document.createElement("iframe"); ...

  5. 自定义alert弹框，title不显示域名

    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...

  6. 局域网两台机器ping超时

    在防火墙的高级设置中的入站规则里,找icmpv4 ,我的两条电脑都是无线连的,看你的无线是专用还是公用,开启对应的规则. windows默认是关闭的,我的系统前些天刚重置过,ping超时,还是要手动开 ...

  7. ECharts柱状图添加点击事件

    参考: https://zhuanlan.zhihu.com/p/33050579 https://blog.csdn.net/sophia_xiaoma/article/details/780559 ...

  8. 【LeetCode】最大子序列和

    要求时间复杂度 O(n). e.g. 给定数组 [-2,1,-3,4,-1,2,1,-5,4],其中有连续子序列 [4,-1,2,1] 和最大为 6. 我完全没有想法,看了答案. C++实现: int ...

  9. java项目中登陆时记住密码

    1.在登陆的时候记住密码,不知自动登陆: 2.登陆页面,填写用户名,密码,点击记住密码,下次进入登陆页面的时候,填写同样的用户名,密码自动填充(在不一次会话的情况下也就是说在不关闭浏览器的情况下): ...

  10. JDK8的ConcurrentHashMap也会造成CPU 100%

    转载:不止 JDK7 的 HashMap ,JDK8 的 ConcurrentHashMap 也会造成 CPU 100%?原因与解决~ 现象 大家可能都听过JDK7中的HashMap在多线程环境下可能 ...