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

思想为:

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

具体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. margin四个属性的顺序

    margin-top ,margin-right ,margin-bottom ,margin-left .方向为 上右下左,顺时针方向, 值可以是: 百分比(基于父对象总高度或宽度的百分比) 长度值 ...

  2. JS获取request字符串

    function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  3. iOS 使用自定义的字体

    一.新建一个工程,准备好要使用的字体,后缀为.ttf或者.otf格式. 二.将字体直接拖入工程项目中. 三.在Info.plist中添加一个新的Key:Fonts provided by applic ...

  4. Tomcat 改BUG之 localhost:8080 404

    经过研究,发现造成该问题的原因可能是: 1.默认的80端口被占用: 2.服务-->apache tomcat未开启: 3.有资料称,是因为设备64位或32位,和软件不匹配: 4.(也有资料说是j ...

  5. codeforces #332 div2

    A. #include<cstdio> #include<algorithm> #include<cmath> #include<map> #inclu ...

  6. html中的表格 bootstrap-table

    1 bootstrap-table 官网: http://bootstrap-table.wenzhixin.net.cn/ 2

  7. c++ 资源索引

    1.http://snippets.dzone.com/tag/c/ --数以千计的有用的C语言源代码片段  2.http://www.hotscripts.com/category/c-cpp/sc ...

  8. js 数组排除重复值(string)

    前提:数组中的元素类型为:string 在网上看了许多高大尚的文章,还是解决不了我的string arry 的问题,只能怪自己脑残了,上代码: <!DOCTYPE html> <ht ...

  9. Javascript自定义类

    JavaScript并不是严格的面向对象的语言,但是带有面向对象的一些特性,我们可以通过这些特性创建js中的自定义类. JavaScript中的类其实是function关键字包裹的一系列变量和方法. ...

  10. windows 激活远程桌面服务