css 实现省略号. text-overflow: ellipsis; 同时设置四个属性才可以.
这个同时需要. 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基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
css 实现省略号. text-overflow: ellipsis; 同时设置四个属性才可以.的更多相关文章
- css 文本省略号设置
本文推荐2种方法. 1. css tip:只兼容chrome内核的浏览器.ff不支持. .box { overflow: hidden; /* 溢出时不显示溢出的内容 */ text-overflow ...
- CSS深入理解之overflow
CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...
- css文本省略号
这里记录下如何用CSS实现单行.多行文本溢出容器的时候用省略号代替溢出部分. 单行文本溢出容器时显示省略号的CSS实现方法 /* 规定当内容溢出元素框(容器)时隐藏 */ overflow: hidd ...
- 纯css实现省略号，兼容火狐，IE9，chrome
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡
pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...
- css 浮动问题 display显示 和 光标设置cursor
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>浮 ...
- CSS Animation triggers text rendering change in Safari
薄荷新首页上周五内测,花哥反馈在 MacBook Safari 浏览器下 鼠标移动到第一个商品的时候后面几个商品的文字会加粗.这是什么鬼??? 待我回到家打开笔记本,鼠标蹭蹭蹭的发现问题远不止如此: ...
- radio，checkbox，select，input text获取值，设置哪个默认选中
11 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...
- css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...
随机推荐
- PHP多种序列化/反序列化的方法（serialize和unserialize函数）
serialize和unserialize函数 这两个是序列化和反序列化PHP中数据的常用函数. <?php $a = array('a' => 'Apple' ,'b' => 'b ...
- laravel的重定向
Route::get("redirect1", function () { // redirct的三种写法 // return redirect()->route(" ...
- Highcharts 环境配置
Highcharts 环境配置 本章节我们将为大家介绍如何在网页中使用 Highcharts. Highcharts 依赖于 jQuery,所以在加载 Highcharts 前必须先加载 jQuery ...
- 安装docker No package docker available
安装docker 时候出现以下问题 yum -y install dockerLoaded plugins: fastestmirrorDetermining fastest mirrors * ba ...
- HTML 5 <span> 标签
标签定义及使用说明 <span> 用于对文档中的行内元素进行组合. <span> 标签没有固定的格式表现.当对它应用样式时,它才会产生视觉上的变化.如果不对 <span& ...
- 2017-3-31/socket
1. 讲讲你对套接字编程的理解,它的协议是如何的? socket通常称为"套接字",用于描述IP地址和端口,是一个通信链的句柄.应用程序通过套接字向网络发出请求或应答网络请求. 服 ...
- docker容器扫盲
Centos 6.5 安装和使用docker 基于本人一贯的习惯,关于“某某某是什么”这样的问题,请百度吧,会有更专业的人士,会比我说的更详细更深,这里我只给出本人亲历的安装和使用过程. 1.安装 先 ...
- NOSQL -- mongoDB的了解与安装(Wins10)
NOSQL -- mongoDB的了解与安装 首先看看什么是nosql: 我的理解:非关系型数据库,大多是以map形式存储,map<key,value>,适合存储,查询.redis也是no ...
- FJUT16级第一周寒假作业题解I题
涨姿势题3 TimeLimit:1000ms MemoryLimit:128000KB 64-bit integer IO format:%lld Problem Description 涨姿势题就 ...
- Windows与Linux的回车换行转换
最初"\r"(return)表示“回车”即回到行首,“\n”(next)表示“换行”即定位到下一行:UNIX和Linux使用“\n”换行,而Windows用“\r\n”(不是\n\ ...