多行文本溢出处理:

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. 【ZeroMQ】1、ZeroMQ(java)入门之Requerst/Response模式

    自己最开始是在cloud foundry中接触过消息服务器(nats),或者说是消息中间件,也算是初步知道了一个消息服务器对于分布式的网络系统的重要性,后来自己也曾想过在一些项目中使用它,尤其是在一些 ...

  2. Android四大组件-Content Provider

    http://www.jianshu.com/p/c3ce81b638bd 一.基础回顾. 简介ContentProvider(数据提供者)是在应用程序间共享数据的一种接口机制,虽然我们可以采用文件存 ...

  3. 服务注册中心Eureka vs Zookeeper vs Consul

    前言 在现在云计算和大数据快速发展的今天,业务快速发展和变化.我们以前的单一应用难以应对这种快速的变化, 因此我们需要将以前单一的大应用不断进行差分,分成若干微小的应用或者服务,这就是微服务的思想.但 ...

  4. 【代码笔记】iOS-字符串替换回车和换行

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...

  5. 【读书笔记】iOS-网络-HTTP-URL结构

    http://user:password@hostname:port/absolute-path?query. http:  协议 user:password@   认证 hostname:  主机名 ...

  6. pms前端结构

    后台采用.net MVC框架,前端采用requirejs.整个系统页面布局基本不变,每个页面只改变Main_Content部分. 模板页cshtml: <!DOCTYPE html> &l ...

  7. ActiveReports 报表中 RDF 文件解析

    AcitveReport 提供两种报表模板,XML(RPX)模板和Code-Based 模板.两者都可以用于设计报表. 但是 RDF 格式文件我们大多不是很了解.许多客户在提到 RDF 格式时显得无所 ...

  8. 7.0 FileProvide适配

    7.0 Build.VERSION_CODES.N 24 为什么要适配 在7.0中 ,Uri.from(file),可能会触发FileUriExposedException 和动态权限一样,如果tar ...

  9. Intellij IDEA去除@Autowired下划线红色提示

    Intellij IDEA通过@Autowired注入的对象,在不改变配置的情况下一直有红色下划线,虽然不影响运行,但是跟小Alan一样有强迫症的肯定受不鸟. 那么怎么去除它呢? 解决方式:改变@Au ...

  10. 【three.js练习程序】创建太阳系

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...