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. native.js是什么且如何使用

    native.js是什么且如何使用 一.总结 一句话总结:Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术.Native.js不是一个 ...

  2. 团队作业-Beta冲刺（2）

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...

  3. carousel轮播器

    <div id="myCarousel" class="carousel slide" data-ride="carousel" st ...

  4. TrueSec引导的Linux系统和安全检测工具预览

      650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=&qu ...

  5. JS前端监控机制的建立

    JS前端监控机制: 1.采用try...catch...,和window.onerror的形式. 2.最终形成错误日志文件,并发送邮件和短信的形式进行报警. 3.如果是跨域请求,在script标签上要 ...

  6. position(static-relative-absolute-fixed),margin(top-right-bottom-left),top-right-bottom-left

    最近写css遇到一些问题,所以准备写下来捋一下思路. 1.position=satic下看margin的使用.(top-right-bottom-left在这种case下无效) 1-1)margin ...

  7. [转]Accept-Encoding

    原文地址:https://blog.csdn.net/sqzhao/article/details/49499471 HTTP Header中Accept-Encoding 是浏览器发给服务器,声明浏 ...

  8. Trie图（模板）

    Trie图(蒟蒻听说AC自动机能做的题Trie图都能做,而且AC自动机可能被卡,就没学过AC自动机),最近想捡一捡,好久之前做的了. Trie图,就是一个在Trie树上建的图  大概描述一下 比如说有 ...

  9. 几个经常使用的cmd命令

    compmgmt.msc 计算机管理  devmgmt.msc 设备管理器  diskmgmt.msc 磁盘管理工具  dfrg.msc 磁盘碎片整理  eventvwr.msc 事件查看器  fsm ...

  10. android中常见声音操作方式(Ringtone,SoundPool,MediaPlayer)小结

    在Android开发中有时候需要用到播放声音操作,在android API 的media包中有三种方式可供我们选择,它们分别是Ringtone,SoundPool,MediaPlayer.因为在我目前 ...