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 ...
随机推荐
- SPOJ GCDEX (数论)
转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents by---cxlove 题意:求sigma (gcd (i , j)) ...
- ubuntu如何开启SSH服务
ubuntu如何开启SSH服务 分类: Linux 运维与操作基础2013-02-24 13:33 2868人阅读 评论(0) 收藏 举报 sshd ubuntu ubuntu默认并没有安装ssh服务 ...
- php 添加 redis 扩展模块
由于PHP源码中并未有redis的文件,所以需要自己下载. 下载地址: http://pecl.php.net/get/redis-2.2.5.tgz [root@study package]# ta ...
- 消除多余的row
tableviewName.tableFooterView = [[UIView alloc]initWithFrame:CGRectZero];
- linux下C++对线程的封装
之前一直是使用C语言,前段时间转做C++.无论使用什么语言,多线程编程都是不可或缺的.最近项目中又用到了线程,现在将线程的封装做出总结: 1.线程类中应该包含线程ID.线程的状态以及线程基本操作等. ...
- 【Lucene4.8教程之三】搜索
1.关键类 Lucene的搜索过程中涉及的主要类有以下几个: (1)IndexSearcher:执行search()方法的类 (2)IndexReader:对索引文件进行读操作,并为IndexSear ...
- Arcgis Engine 添加一个Symbol符号样式步骤
public static void DrawPictureMarkerSymbol(IGlobe globe, String layerName) { //添加一个图层 ESRI.ArcGIS.Ca ...
- 不同分辨率下获取不同js文件
获取当前网站的目录 //js获取网站根路径(站点及虚拟目录),获得网站的根目录或虚拟目录的根地址 function getRootPath(){ //整个域名(如:http://vc3.cn/ind ...
- 【转载】深入浅出http请求
转载链接:http://www.cnblogs.com/yin-jingyu/archive/2011/08/01/2123548.html HTTP(HyperText Transfer Proto ...
- Python 在Windows下安装matplotlib
windows下安装很麻烦,使用easy_install 安装报错 提示缺少freetype 和png 后经多方查询,最终安装成功 以下是安装过程 前提你的Python环境已经搭建好了 1.前提需要 ...