一、单行

实现单行文本的溢出显示省略号使用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. java_Mac安装多个JDK版本并设置环境变量

    JDK6.JDK7.JDK8三个版本的汇总地址:https://pan.baidu.com/s/1pKSYv8Z 安装 JDK6安装 JDK6下载地址 见网盘 安装完毕后确认版本 JavaForOSX ...

  2. Swift - 关于 Optional 的一点唠叨

    Optional 是 Swift 的一个非常重要的特性,它除了提供类型安全的机制,也是 Swift 中很多语言特性的核心.当然,使用 Optional 时也要了解很多坑,这样能帮助我们更好的运用它. ...

  3. 解决WPF的ScrollViewer在使用触摸屏时,滑到尽头窗口抖动的情况

    原文:解决WPF的ScrollViewer在使用触摸屏时,滑到尽头窗口抖动的情况 wpf的ScrollViewer在触摸条件下 默认在尽头时会有一个窗口一起被拖动的FeedBack,但对用户的交互很不 ...

  4. C# .NET锁屏程序(顺带屏蔽任务管理器)

    原文:C# .NET锁屏程序(顺带屏蔽任务管理器) 第一步:将窗体的FormBorderStyle设置为none,WindowState设为Maximized 占据整个屏幕. 第二步:使用钩子监控全局 ...

  5. 使注解@ContextConfiguration同时支持locations和classes

    @Configuration @ImportResource("classpath:META-INF/dataContext.xml") class TestConfig { } ...

  6. 【Python】设备重启测试

    ①添加读取键盘输入功能,方便测试者选择压测次数! Python提供了 input() 内置函数从标准输入读入一行文本,默认的标准输入是键盘. input 可以接收一个Python表达式作为输入,并将运 ...

  7. Unpaired/Partially/Unsupervised Image Captioning

    这篇涉及到以下三篇论文: Unpaired Image Captioning by Language Pivoting (ECCV 2018) Show, Tell and Discriminate: ...

  8. Windows10 【系统周期表】【系统下载表】【大型软件表】

    系统周期表 商用名称 商用英文名 代号 版本 系统版本 上市日期 服务周期 备注 Windows 10 无 Threshold 1 1507 10.0.10240.17443 2015.07.29 2 ...

  9. 正试图在 os 加载程序锁内执行托管代码

    正试图在 os 加载程序锁内执行托管代码.不要尝试在 DllMain 或映像初始化函数内运行托管代码... 当我在窗体初始化的时候,调用了一个外部的dill时,它就不知什么原因的 抛出一个“正试图在 ...

  10. Advanced Installer 中测试数据库连接提示“未发现数据源名称并且未指定默认驱动程序”的解决办法

    原文:Advanced Installer 中测试数据库连接提示"未发现数据源名称并且未指定默认驱动程序"的解决办法 最近需要制作一个安装包,安装包的要求如下: 1.用户手工填写M ...