CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号:
思想为:
首先设置宽度,然后让超出的部分隐藏
如果有超出则在最后显示省略号
让文本不换行
具体css代码为:
.title{
width:200px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-break:keep-all;
}
Html代码就不用写了,一个div 或者span class = "title"即可。
CSS文字超出div或者span时显示省略号的更多相关文章
- CSS实现超出DIV宽度文字自动隐藏并显示省略号
当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- Css文字在div中自动换行
Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 文字超出DIV后,隐藏文字并显示...
<html> <head> <style type="text/css"> #cs{width:100px;height:50px;line-h ...
- JQuery 简单的文字超出部分隐藏下拉显示
HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...
- Div和Span标签显示与隐藏
本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- css 文字超出省略号
white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...
随机推荐
- 提高你的Java代码质量吧:小心switch带来的空值异常
一.分析 使用枚举定义常量时,会有伴有大量的switch语句判断,目的是为每个枚举解释其行为. 我们知道,目前的Java的switch语句只能判断byte.short.char.int类型(JDK7 ...
- 9.5 在 C# 中使用 F# 库
9.5 在 C# 中使用 F# 库 像 C# 一样,F# 也是一种静态类型的语言,就是说,编译器知道每一个值的类型,以及类方法和属性的签名.对于与 C# 的互操作性来说.这是很重要的,由于,编译器能够 ...
- MySQL5.6 windows7下安装及基本操作
图形界面安装MySQL5.6关于图形界面的安装,网上相关相关资料比较多,此处省略安装过程.安装过程中选择安装路径.所需组件及root账号密码.1.目前针对不同用户,MySQL提供了2个不同的版本:My ...
- 【计算几何初步-判断是否凸多边形】【HDU2108】Shape of HDU
Shape of HDU Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...
- JavaScript类的设计
[转载] Javascript与其他的面向对象语言不同,如C++,Java或PHP等.它并不是基于类的,而是基于原型的一种语言. 1.对象创建 在Javascript中创建一个类是非常容易的: var ...
- 关于Storyboard
界面的搭建器IB有两种 1.stroyboard (不仅可以搭建界面 并且可以实现界面之间的关系) 2.xib (只能是单个视图或者界面) 如何配置自己创建的storyboard 1.infoPlis ...
- CAD2014以上版本不信任加载项解决方法
前一段时间做CAD插件支持版本升级遇到了一个很棘手的问题,CAD2014以上版本增加了受信任功能,每次用程序启动CAD并加载arx文件时都弹出对话框询问是否加载 我的解决方法如下:(仅供参考) 读取注 ...
- view import symbols
nm -D [file]|grep -w U or objdump -T [file]|grep "*UND*"
- java.io.IOException: open failed: ENOENT (No such file or directory)open failed: EISDIR (Is a directory)
这一类的错误,原因一般有两点: 1.没有给相应读写文件权限 2.给了权限,但是文件的路径写的不对,比如少了“/”,这样就会报错了. Caused by: android.system.ErrnoExc ...
- javascript 给关键字加链接
var keys = { "和尚":["http://www.baidu.com","#ff0000"], "系统":[ ...