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; }
随机推荐
- ruby cloud9部署到heroku
Cloud9网址:https://c9.io/ 使用github账号登陆,如果没有,现在github(https://github.com/)上注册一个用户,在进行登陆.
- Java线上应用故障排查
线上故障主要2种: CPU利用率很高, 内存占用率很大 一.CPU利用率很高 1. top查询那个进程CPU使用率高 2. 显示进程列表 ps -mp pid -o THREAD,tid,time 找 ...
- LeetCode(36)Valid Sudoku
题目 Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could ...
- [bzoj1058][ZJOI2007][报表统计] (STL)
Description 小Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工 作,作为她的生日礼物之一.经过仔细观察,小Q发现统计一张报表实际上是维护一个 ...
- ..net 3.5新特性之用this关键字为类添加扩展方法
具体用法如下: public static class ClassHelper { //用this 声明将要吧这个方法附加到Student对象 public static bool CheckName ...
- MVC系统学习7—Action的选择过程
在Mvc源码的ControllerActionInvoker的InvokeAction方法里面有一个FindAction方法,FindAction方法在ControllerDescriptor里面定义 ...
- css3 & background & background-image
css3 & background & background-image https://developer.mozilla.org/en-US/docs/Web/CSS/backgr ...
- restful(2):视图
视图部分小结: # as_view()中的参数:利用参数(一个字典)来指定什么方式用什么方法来执行(哪种请求方式由哪种内部方法来执行) # 例如 Retrieve时,需要在对应的url中添加有名分组 ...
- Android 4.4.2上与BLE 蓝牙锁设备的通讯
Android从4.3(Api level 18)开始支持BLE的开发,本文记录了Android 4.4.2设备与BLE设备通讯的流程. 权限需求: <uses-permission andro ...
- POJ1276 Cash Machine
Time Limit: 1000MS Memory Limit: 10000KB 64bit IO Format: %lld & %llu Description A Bank pla ...