我们常常需要在文本过长时显示，将超出显示成省略号：

思想为：

首先设置宽度，然后让超出的部分隐藏
如果有超出则在最后显示省略号
让文本不换行

具体css代码为：

.title{

width:200px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-break:keep-all;

}

Html代码就不用写了，一个div 或者span class = "title"即可。

CSS文字超出div或者span时显示省略号的更多相关文章

  1. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

  2. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  3. Css文字在div中自动换行

    Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行

  4. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  5. 文字超出DIV后,隐藏文字并显示...

    <html> <head> <style type="text/css"> #cs{width:100px;height:50px;line-h ...

  6. JQuery 简单的文字超出部分隐藏下拉显示

    HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...

  7. Div和Span标签显示与隐藏

    本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...

  8. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  9. css 文字超出省略号

    white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...

随机推荐

  1. Ffmpeg和SDL如何同步音频

    ong> 同步音頻 现在我们已经有了一个比较像样的播放器.所以让我们看一下还有哪些零碎的东西没处理.上次,我们掩饰了一点同步问题,也就是同步音频到视频而不是其它的同步方式.我们将采用和视频一样的 ...

  2. Riak VClock

    Riak VClock 关于向量时钟的概念.在这里就多讲了,大家能够參照一下Dynamo的论文了解一下,向量时钟在分布式主要用于解决一致性性问题.能够和CRDTs一起看. 以下的源码是參照riak中的 ...

  3. 工作记录8:iOS 传值问题总结（7种传值完美介绍）

    1.属性传值 前向后传值. 记住: /* 1: 属性传值第一步需要用到什么类型就定义什么样的属性 2: 从上一个页面到一个页面的选中方法里面将要传的值传到来(上一个页面)备注:这种方法只适用于上一个页 ...

  4. 关于 jsp:include 传参的用法

    引用模版页面的代码,如下: <jsp:include page="/WEB-INF/template/nav_template.jsp">     <jsp:pa ...

  5. vmware tools 安装

    转到虚拟机 > 安装 VMware Tools(或 VM > 安装 VMware Tools).注意:如果您运行的是轻量版的 Fusion.不带 VMware Tools 的 Workst ...

  6. mysql配置的讲解 mysql的root密码重置 mysql的登录

    一,MySQL配置的讲解 port  默认mysql端口 socket  用于服务器端和客户端通信的套连接文字 skip-locking 取消文件系统的外部锁 key_buffer_size  索引缓 ...

  7. escape和unescape给字符串编码

    var before = "\xxx\xxx" var after = escape(before); var after2 = unescape(after );

  8. java中List的用法

    list的添加删除等操作 import java.util.*; class TestList { public static void main(String[] args) { List<S ...

  9. Makefiles 介绍

    http://www-personal.umich.edu/~ppannuto/writings/makefiles.html Makefiles Makefiles (or, the GNU aut ...

  10. TableLayout属性

    整理于http://naotu.baidu.com/file/e5880b84b1a906838116f7a45f58de78