html使用css让文字超出部分用省略号三个点显示的方法案例
html使用css让文字超出部分用省略号三个点显示的方法:
我正确使用的就是下面的代码,li里面是a标记。在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测
li{
display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;
}
直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了。
语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis : 当对象内文本溢出时显示省略标记(...)
说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
请您注意,text-overflow:ellipsis属性在FF中是没有效果的。
示例:
div { text-overflow : clip; }
text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50 个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text- overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样 才能实现溢出文本显示省略号的效果。
示例:
修改前效果:
修改以后效果:
html使用css让文字超出部分用省略号三个点显示的方法案例的更多相关文章
- html使用css让文字多行超出部分用省略号三个点显示的方法案例
text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-w ...
- 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)
文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...
- css 控制文字超出部分显示省略号
该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...
- Css解决表格超出部分用省略号显示
小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...
- css 实现文字过长变成省略号(包含单行的and多行的)
单行的比较简单 但是必须条件同时满足 <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: ...
- css中文字超出文本框,溢出部分用点点点表示
text-overflow 属性规定当文本溢出包含元素时发生的事情.我们可以使用它来对文本超出的部分进行样式的处理. text-overflow: clip|ellipsis|string;包 ...
- CSS解决文字超出显示省略号问题
超出一行 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 超出多行 overflow: hidden; text-ove ...
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- CSS样式-文字超出宽部分用省略号代替
.name {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display:block;width:120px; }
随机推荐
- mysql主库与从库配置(并行复制配置)
主库: [mysqld] server-id = 2233port = 13306basedir = /usr/local/mysqldatadir = /usr/local/mysql/data s ...
- 微信小程序 video组件 不随页面滚动
1.页面初始化(滚动前)时,video所在位置 2.页面滚动后,video视频组件所在位置 看了别人家的小程序并不会出现这种状况.最后检查发现,是页面包裹层设置了 height:100% 导致的 顺便 ...
- Linux内核0.11体系结构 ——《Linux内核完全注释》笔记打卡
0 总体介绍 一个完整的操作系统主要由4部分组成:硬件.操作系统内核.操作系统服务和用户应用程序,如图0.1所示.操作系统内核程序主要用于对硬件资源的抽象和访问调度. 图0.1 操作系统组成部分 内核 ...
- LeetCode(46)Permutations
题目 Given a collection of numbers, return all possible permutations. For example, [1,2,3] have the fo ...
- PAT 1073. 多选题常见计分法
PAT 1073. 多选题常见计分法 批改多选题是比较麻烦的事情,有很多不同的计分方法.有一种最常见的计分方法是:如果考生选择了部分正确选项,并且没有选择任何错误选项,则得到50%分数:如果考生选择了 ...
- idea导入(import)项目和打开(open)项目的区别
前言: 每次接手老项目,都得从git或svn下载下来,但是如果之前的项目不是用idea写的怎么办,可是你又习惯啦idea,那你必须把项目在idea上跑起来,那是用import还是用open呢,如何抉择 ...
- 子集和的目标值(codevs 1692)
题目描述 Description 给定n个整数in和目标值T,求某一非空子集使 子集的元素的和 与 目标值之差 的绝对值最小,元素可重复 输入描述 Input Description 第一行为整数n ...
- 百度音乐免费API接口
音乐分类: 1.新歌榜,2.热歌榜,11.摇滚榜,12.爵士,16.流行21.欧美金曲榜,22.经典老歌榜,23.情歌对唱榜,24.影视金曲榜,25.网络歌曲榜 说明:百度music web版全接口h ...
- elasticsearch 安装ik中文分词
https://blog.csdn.net/c5113620/article/details/79339541
- 静态区间第k大(划分树)
POJ 2104为例[经典划分树问题] 思想: 利用快速排序思想, 建树时将区间内的值与区间中值相比,小于则放入左子树,大于则放入右子树,如果相等则放入左子树直到放满区间一半. 查询时,在建树过程中利 ...