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

思想为:

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

具体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. Android 之 Gallery

    1    在 xml 布局中添加 Gallery activity_main.xml <LinearLayout xmlns:android="http://schemas.andro ...

  2. 修改vim中的tab为4个空格

    记录一下,避免用时还得搜........ 1.临时修改 在vi中,set tabstop=4 或 set ts=4 2.永久修改 vi --version 查看要修改的文件 如果是vim的话,修改~/ ...

  3. CentOS7安装mysql5.6.23 -(转)

    一.下载glibc版本的Mysql mysql-advanced-5.6.23-linux-glibc2.5-x86_64.zip 解压后,得到 mysql-advanced-5.6.23-linux ...

  4. MySQL ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO

    MySQL安装完server端和客户端后,登录Mysql时报错:[root@rhel204 MySQL 5.6.23-RMP]# mysqlERROR 2002 (HY000): Can't conn ...

  5. .net如何后台批量删除

    button_Click(Sender sender,Event e){foreach (DataListItem item in DataList1.Items){CheckBox cbox=(Ch ...

  6. C#关于params的用法(使用数量可变的参数)

    有些方法需要传递个数不定的值进行运算.比如求最小值的方法.除了用容器外,还可以使用params来做 例子如下: using System; using System.Collections.Gener ...

  7. Jquery 工具类函数

    1.$.browser  获取当前浏览器的名称和版本信息 $.browser.chrome  获取chrome浏览器 $.browser.mozilla  获取火狐浏览器 $.browser.msie ...

  8. Asp.net MVC5中Html.DropDownList的使用

    一.静态下拉列表项的绑定 在下拉列表中绑定静态项,我们可以通过 SelectListItem 的集合作为数据源的下拉列表. @Html.DropDownList("dropRoles&quo ...

  9. ContextLoaderListener和Spring MVC中的DispatcherServlet加载内容的区别

    一:ContextLoaderListener加载内容 二:DispatcherServlt加载内容 ContextLoaderListener和DispatcherServlet都会在Web容器启动 ...

  10. IE8的项目在IE11下 一些功能无法实现的解决方案

    最近改了一些IE11下一些功能无法实现的项目,发现了有一些IE8下的方法 ,在IE11下被取消或者替代了,如下: 1.JavaScript 运行时错误: 对象不支持“attachEvent”属性或方法 ...