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 ...
随机推荐
- js，vue.js一些方法的总结
push() 可向数组的末尾添加一个或多个元素 pop() 删除并返回数组的最后一个元素 shift()删除并返回数组的第一个元素 unshift() 添加并返回数组的第一个元素 sort()对数组的 ...
- 【洛谷p5015】标题统计
(写上瘾了再来一篇吧) 标题统计[传送门] 洛谷算法标签 字符串这种东西,我看到是崩溃的.因为我们只学到了二维数组[这个梗自行get],总之我们当时还没有学.然后显然就是各种翻书,各种百度.大致了解了 ...
- 如何改变输出方式（让printf输出结果保存到TXT文本中）
查阅相关资料,汇总如下: #include <stdio.h> #include <stdlib.h> int main() { char money= 's'; char a ...
- 安装docker No package docker available
安装docker 时候出现以下问题 yum -y install dockerLoaded plugins: fastestmirrorDetermining fastest mirrors * ba ...
- python中的IO模块
1.简介 读写文件是常见的IO操作,python内置了读写文本的函数. 读写文件的模式描述如下: 模式 描述 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式打 ...
- 【转】JavaScript数组方法大全
数组在笔试题中出现的概率最高的类型之一,JavaScript中的数组与其他语言中的数组有些区别,为了方便以后查看数组的方法,现将对数组的操作方法进行汇总整理. 数组创建 JavaScript中创建数组 ...
- AWVS和AppScan使用代理进行扫描教程
一.说明 扫描网站时,一是可能某些网站网络不能直接访问,二是可能不想曝露本机IP.这时要进行处理. 第一个方法是如果有vpn直接登vpn,vpn的话由于是直接修改操作系统层次的网络,扫描器不需要额外做 ...
- ElasticSearch的matchQuery与termQuery区别
matchQuery:会将搜索词分词,再与目标查询字段进行匹配,若分词中的任意一个词与目标字段匹配上,则可查询到. termQuery:不会对搜索词进行分词处理,而是作为一个整体与目标字段进行匹配,若 ...
- ci框架memcached使用
首先第一步需要安装memcached扩展 安装方法这里就不叙述了 application/config/memcached.php配置 $config = array( 'default' => ...
- ubuntu16.10安装搜狗输入法
一.搜狗输入法安装 1.首先到搜狗输入法官网下载搜狗输入法,下载的是个deb文件. 搜狗输入法Linux版下载地址:http://pinyin.sogou.com/linux/?r=pinyin 2. ...