这个同时需要. 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. CentOS7 安装Nginx 1.14:

      nginx-1.14.2.tar.gz:下载:wget http://nginx.org/download/nginx-1.14.2.tar.gz 安装nginx:   yum  install  ...

  2. Windows下如何使用Heroku

    1. 安装 进入https://devcenter.heroku.com/articles/heroku-cli#windows,选择对应版本安装 安装后使用heroku -v可检查版本号 2. 登陆 ...

  3. PTA L2-002 链表去重

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805072641245184 第一次做链表题,有时间多看看 解释 ...

  4. PTA L2-001 紧急救援

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805073643683840 输入: 输入第一行给出4个正整数N ...

  5. 漏洞复现——ngnix文件解析漏洞

    漏洞描述: 上传文件时,在文件名后加%00php,就可以绕过检测成功上传而已文件 影响版本: nginx 0.8.41 – 1.5.6 漏洞分析: 该漏洞原理是非法字符空格和截止符(\0)会导致Ngi ...

  6. element-ui table中排序 取消表格默认排序问题

    sortTable  设置为 custom 一定要设置在列上

  7. c# 线程的生命周期

    对于线程而言有两种类型:前台线程,后台线程.前台与后台线程性质相同,但终止条件不同. 后台线程:在运行过程中如果宿主进程结束,线程将直接终止执行:在强制终止时,线程即终止执行不论线程代码是否执行完毕. ...

  8. 克隆linux系统网卡问题

    如果没有 ifcfg-eth0  手动创建 删掉uuid uwaddr 保存退出 然后清空 >/etc/udev/rules.d/70-persistent-net.rules 然后重启 reb ...

  9. 2017-6-6&6-8/大型网站架构总结

    一.WikiPedia(维基百科) WikiPedia是非盈利网站,因此尽可能地使用免费的软件和廉价的服务器.截止到2012年,这个只有区区数百台服务器和十余个技术人员开发.维护的网站,成为流量全球排 ...

  10. Spring AOP+Log4j记录项目日志

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6567672.html 项目日志记录是项目开发.运营必不可少的内容,有了它可以对系统有整体的把控,出现任何问题 ...