一、单行

实现单行文本的溢出显示省略号使用text-overflow:ellipsis属性,但需要配合使用另外两个属性使用才能达到效果。

如下:

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

效果:

二、多行

不考虑兼容性,适用于Webkit浏览器内核

css代码:

  display:-webkit-box;

  -webkit-box-orient:vertical;

  -webkit-box-clamp:3 //截取第三行

  overflow:hidden;

效果:

css实现超出文本溢出用省略号代替的更多相关文章

  1. CSS实现单行文本溢出显示省略号

    p { width:100px;//设定宽度 //以下三个属性设置均必不可少 white-space: nowrap; text-overflow:ellipsis; overflow:hidden; ...

  2. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  3. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  4. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  5. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  6. CSS3文本溢出显示省略号

    CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...

  7. css实现超出一行后用省略号显示

    css实现超出一行后用省略号显示 a{display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden ...

  8. 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法

    一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...

  9. 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...

随机推荐

  1. WPF中StringFormat的用法

    原文:WPF中StringFormat的用法 WPF中StringFormat的用法可以参照C#中string.Format的用法 1. C#中用法: 格式化货币(跟系统的环境有关,中文系统默认格式化 ...

  2. cocos2D-X从的源代码的分析cocos2D-X学习OpenGL(1)----cocos2D-X渲染架构

     个人原创.欢迎转载,转载请注明原文地址http://blog.csdn.net/bill_man 从本篇文章開始,将分析cocos2D-X 3.0源码,第一部分是从cocos2D-X学习OpenGL ...

  3. Dijkstra含权图最短路径;审判,不要错过枚举退款保证不会重复;国际象棋八皇后问题

    求两节点的最短通路.对于无权图,能够通过图的广度优先遍历求解.含权图一般通过Dijkstra算法求解. import java.util.ArrayList; import java.util.Has ...

  4. JAVASCRIPT高程笔记-------第八章 浏览器BOM对象

    8.1 window对象--表示一个浏览器的实例 在全局作用域中声明的任何变量.函数都会变成window对象的属性和方法,与之直接定义window对象的属性的区别是   window.xxx 可以通过 ...

  5. byte[] 左移和右移

    public static class ex { public static byte[] RightShift(this byte[] ba, int n) { ) { return ba.Left ...

  6. Wpf发送接收 win32消息

    #region WPF发送和接收win32消息 public const int WM_GETTEXT = 0x0D; public const int WM_SETTEXT = 0x0C; publ ...

  7. Win8Metro(C#)数字图像处理--2.29图像除法运算

    原文:Win8Metro(C#)数字图像处理--2.29图像除法运算  [函数名称] 图像除法函数DivisionProcess(WriteableBitmap src, WriteableBit ...

  8. git 笔记-初始化

    进入项目所在的文件夹 git init git remote add origin https://github.com/enderlu/test.gitgit push -u origin mast ...

  9. 十七 bootstrap-table tableExport 导出xlsx格式表格

    原文:十七 bootstrap-table tableExport 导出xlsx格式表格 在[十六.bootstrap-table javascript导出数据]中,打开导出的表格时,总会弹出一个提示 ...

  10. SqlServer & Windows 可更新订阅立即更新启用分布式事务协调器(MSDTC)

    原文:SqlServer & Windows 可更新订阅立即更新启用分布式事务协调器(MSDTC) 在可更新订阅中,在订阅设置更新方法,将 "排队更新" 设置为 " ...