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. vue.js有什么用，是用来做什么的（整理）

    vue.js有什么用,是用来做什么的(整理) 一.总结 一句话总结:用数据绑定的思想,vue可以简单写单个页面,也可以写一个大的前端系统,也可以做手机app的界面. 1.Vue.js是什么? 渐进式框 ...

  2. Spark通过YARN提交任务不成功（包含YARN cluster和YARN client)

    无论用YARN cluster和YARN client来跑,均会出现如下问题. [spark@master spark-1.6.1-bin-hadoop2.6]$ jps 2049 NameNode ...

  3. [USACO08JAN]电话线Telephone Lines(分层图)/洛谷P1948

    这道题其实是分层图,但和裸的分层图不太一样.因为它只要求路径总权值为路径上最大一条路径的权值,但仔细考虑,这同时也满足一个贪心的性质,那就是当你每次用路径总权值小的方案来更新,那么可以保证新的路径权值 ...

  4. itchat转发指定的微信群里某个用户的发言到指定的群

    复读机功能, 如果有比较多的用户,超出500人,那就得分开至少两个群,如何把一些消息自动复制到另一个群呢. 自动转发指定用户的发言,转发到别的群 # !/usr/bin/env python # -* ...

  5. spring @configuration使用

    http://yaobenzhang.blog.163.com/blog/static/2143951132014811105138824/

  6. Java Web学习总结（5）——HttpServletResponse对象详解

    一.HttpServletResponse常见应用--生成验证码 1.1.生成随机图片用作验证码 生成图片主要用到了一个BufferedImage类, 生成随机图片范例: package gacl.r ...

  7. spring使用context:property-placeholder载不进属性问题 wangbiglei 发表于1年前 原 spring使用context:property-placeholder载不进属性问题

    https://my.oschina.net/wangbiglei/blog/489583 http://www.cnblogs.com/leftthen/p/5615066.html

  8. elementUI upload 对图片的宽高做校验

    很开心今天中午没有吃饭!原因是一直没有解决掉一个小问题,于是一直试错,最后看了下源码才有了点头绪,历时四五个小时才解决掉,有点怀疑自己的能力了,所以写下此文,记录一下今天的囧况!一般情况下遇到问题,自 ...

  9. 原生js大总结一

    001.浅谈堆和栈的理解?   js变量存储有栈存储和堆存储,基本数据类型的变量存储在栈中,引用数据类型的变量存储在堆中 引用类型数据的地址也存在栈中   当访问基础类型变量时,直接从栈中取值.当访问 ...

  10. 【Codeforces Round #442 (Div. 2) D】Olya and Energy Drinks

    [链接] 我是链接,点我呀:) [题意] 给一张二维点格图,其中有一些点可以走,一些不可以走,你每次可以走1..k步,问你起点到终点的最短路. [题解] 不能之前访问过那个点就不访问了.->即k ...