width: 100%;//需要指定宽度
 overflow: hidden;//溢出隐藏
 text-overflow: ellipsis;
 white-space: nowrap;//强制不换行

text-overflow: ellipsis;

这里的重点样式是  text-overflow: ellipsis;·

不过话说text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

这里面需要限定宽度、文字显示在一行中（white-space:nowrap;）和使用隐藏属性overflow。

css强制不换行 多出的字省略号的更多相关文章

  1. css 强制不换行

    强制不换行 div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{w ...

  2. CSS强制中英文换行与不换行

    1. word-break:break-all; 只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space ...

  3. CSS强制英文换行

    1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space: ...

  4. [js]纯css强制不换行

    要加在li上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. CSS自己主动换行、强制不换行、强制断行、超出显示省略号

    P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...

  6. CSS自动换行、强制不换行、强制断行、超出显示省略号

    转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...

  7. css实现强制不换行/自动换行/强制换行

    在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少小月是很懒惰的从来是用什么查什么 ♦ 嘻嘻...).今天我们 ...

  8. CSS - 如何实现强制不换行、自动换行、强制换行 以及 chrom默认焦点 IE下 Input 默认出现叉

    *:focus {outline: none;} input::-ms-clear {display:none;} 一般的文字截断(适用于内联与块): .text-overflow { display ...

  9. css 强制换行

    强制不换行 div{white-space:nowrap;} 自动换行div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行div{wor ...

随机推荐

  1. php中如何动态获取函数的参数

    php动态获取函数参数 一.总结 一句话总结:a.PHP 在用户自定义函数中支持可变数量的参数列表.其实很简单,只需使用 func_num_args() , func_get_arg() ,和 fun ...

  2. php数组插入数据

    php数组插入数据 一.总结 代码要多敲,看是看不会的 php代码直接在页面不好敲,可以去控制器里面敲 二.目标 在一组数中,要求插入一个数,按其原来顺序插入,维护原来排序方式. 三.代码 (1).思 ...

  3. 新手前端笔记之--初识html标签

    接触前端(好大气的名字啊)已经一个多月了,看了很多视频和博客,有了一定的感性认识,但还是需要总结一下以便系统化所学习的知识,就从html标签开始吧.关于标签,谈论最多的就是简洁和语义化.简洁指html ...

  4. JS/CSS 各种操作信息提示效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. CSS min-height不能解决垂直外边距合并问题

    垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...

  6. 一个虐你千百遍的问题：“RPC好，还是RESTful好？”

    看到知乎上有这样一个问题 WEB开发中,使用JSON-RPC好,还是RESTful API好? 还有其他优秀的推荐方案吗? -------------------------------------- ...

  7. 【iOS开发-29】解决方式：TabBar的图片不显示，仅仅显示灰色的正方形

    (1)现象 tabbar上的图片变成一块正方形的灰色块块,原先的图片没有了. (2)原因 tabbar上的图片本质上不是一个图片.而是一个形状图片.系统对我们使用的图片也仅仅是把当中的形状" ...

  8. 编码与乱码(05)---GBK与UTF-8之间的转换--转载

    原文地址:http://www.blogjava.net/pengpenglin/archive/2010/02/22/313669.html [GBK转UTF-8] 在很多论坛.网上经常有网友问“  ...

  9. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  10. Jmeter--性能测试工具的搭建

    第一步:Jmeter软件下载第二步:解压下载的Jmeter包到某一盘符下,最好解压到无中文字符目录下,防止乱码问题,以我电脑为例,比如:D:tools第三步:找到解压的文件jmeter.bat,一般在 ...