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

思想为:

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

具体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. 用 oracle vitual box 克隆虚拟机,找不到eth0的解决方案

    用 oracle vitual box 克隆虚拟机 当我们需要使用多台虚拟机的时候,如果一台一台的安装,实在是太过麻烦了.所以一般的虚拟机软件都为我们提供了克隆已有虚拟机状态的功能.Oracle vi ...

  2. Android应用程序请求SurfaceFlinger服务渲染Surface的过程分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/7932268 在前面一篇文章中,我们分析了And ...

  3. mysql1主多从配置

    mysql一主多从的配置: 其实1主多从的配置与一主一从配置非常相似,现在主要讲讲一主多从的大概配置方法. 一, 1,master端开启binlog日志,并且设置server id=1. 2.重启服务 ...

  4. httpwatch 9.3怎么在ie 8上看不到

    首先,确认HttpWatch Basic加载项是否启动:打开IE,单击工具图标并选择管理加载项.确认HttpWatch Basic的状态是已启用,点击关闭.之后打开某个网页,在页面空白处右击选择Htt ...

  5. sql相关操作

    1.两个不同数据库对应字段相应操作 //操作模版:insert into data2.table2(字段1,字段2,字段) select 字段j,字段k,字段m from data1.table1举例 ...

  6. android 补间动画

    android开发过程中,为了更好的展示应用程序,应用程序添加动画,能够很好地实现这个功能.如果动画中的图像变化有一定的规律,可以采用自动生成图像的方式来生成动画,例如图像的移动.旋转.缩放等.自动生 ...

  7. 【转】SSIS 2012 – Package Configurations Menu Option Missing

    原文:http://dataqueen.unlimitedviz.com/2012/01/ssis-2012-package-configurations-menu-option-missing/ I ...

  8. /boot磁盘空间不足,没盘扩展,只好删除旧内核了

    [xiejdm@localhost ~]$ uname -r -.el7.x86_64 [xiejdm@localhost ~]$ sudo rpm -qa | grep kernel kernel- ...

  9. Docker 生成Node.js web app(含端口映射)

    1.新建目录src,并进入src目录 [xiejdm@localhost Documents]$ mkdir src [xiejdm@localhost Documents]$ cd src/ 2.创 ...

  10. linux学习笔记之套接字

    一.基础知识. 1:套接字基础. 1,是通信端点的抽象. 2,在UNIX类系统中被当作是一种文件描述符. 3,套接字通信域. 域 描述 AF_INET IPV4因特网域 AF_INET6 IPV6因特 ...