多行文本溢出处理:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 3 行
overflow: hidden;

单行文本溢出处理:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

但如果溢出效果的文本外还有一层 p ,则溢出效果不会显示,如下代码 :

<div>
<p>老师你给是风格顺过饰非色发给</p>
</div>

解决办法是将 p 的 display 设为 inline

css 文本溢出的更多相关文章

  1. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

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

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

  3. css文本溢出隐藏显示省略号(单行+多行)

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  4. CSS文本溢出处理方式

    1. 单行文本溢出省略号效果 .ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } <div cl ...

  5. CSS ... 文本溢出用省略号代替

    { overflow:hidden; text-overflow:ellipsis; white-space:nowrap } text-overflow 属性规定当文本溢出包含元素时发生的事情. c ...

  6. CSS文本溢出效果&滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  7. css文本溢出解决方案

    1.普通单行截断省略 overflow:hidden; 文字长度超出限定宽度,则隐藏超出的内容) text-overflow:ellipsis;(设置文字在一行显示,不能换行) white-space ...

  8. #CSS 文本溢出部分显示省略号

    单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...

  9. css 文本溢出显示省略号

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. jstl 中无法使用EL语句。异常信息:According to TLD or attribute directive in tag file, attribute value does not accept any expressions

    JSTL 标签库的有两种 taglib 伪指令, 其中 RT 库即是依赖于 JSP 传统的请求时属性值, 而不是依赖于 EL 来实现: 只要将 <%@ taglib uri="http ...

  2. PHP实现大转盘抽奖算法

    流程: 1.拼装奖项数组,2.计算概率,3.返回中奖情况 代码如下:中奖概率 ' v ' 可以在后台设置,传到此方法中,注意传整数 function get_gift(){ //拼装奖项数组 // 奖 ...

  3. 设计模式(9)--Composite(组合模式)--结构型

    1.模式定义: 组合模式属于对象的结构模式,有时又叫做“部分——整体”模式.组合模式将对象组织到树结构中,可以用来描述整体与部分的关系.组合模式可以使客户端将单纯元素与复合元素同等看待. 2.模式特点 ...

  4. 学习笔记(2)——实验室集群LVS配置

    查看管理结点mgt的网卡信息,为mgt设置VIP [root@mgt ~]# ifconfig eth0 Link encap:Ethernet HWaddr 5C:F3:FC:E9:: inet a ...

  5. Android 经典欧美小游戏 guess who

    本来是要做iOS开发的,因为一些世事无常和机缘巧合与测试工作还有安卓系统结下了不解之缘,前不久找到了guess who 源码,又加入了一些自己的元素最终完成了这个简单的小游戏. <?xml ve ...

  6. GDI+编程(画笔/画刷/路径/区域)

    构造Graphics对象 Graphics类是GDI+程序设计的核心,Graphics类能够完成大部分的绘图,文本输出,几何图形的填充及坐标系统的转换等各种操作.在功能上,它与GDI的设备环境(DC) ...

  7. go语言练习:文件哈希

    package main import ( "crypto/sha256" "encoding/hex" "fmt" "io&qu ...

  8. c#中Indexof()和Split()的用法

    C#中IndexOf的使用 indexOf() 查找字串中指定字符或字串首次出现的位置,返首索引值,如: str1.IndexOf("字"): //查找“字”在str1中的索引值( ...

  9. 使用 HPC Pack 为 Azure 中的 Windows HPC 工作负荷创建和管理群集的选项

    利用 Microsoft HPC Pack 和 Azure 的计算与基础结构服务,创建和管理基于云的高性能计算 (HPC) 群集. HPC Pack 是在 Azure 和 Windows Server ...

  10. 使用 Azure CLI 创建 Windows 虚拟机

    Azure CLI 用于从命令行或脚本创建和管理 Azure 资源. 本指南详细介绍如何使用 Azure CLI 部署运行 Windows Server 2016 的虚拟机. 部署完成后,我们连接到服 ...