css 文本溢出
多行文本溢出处理:
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 文本溢出的更多相关文章
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- css文本溢出隐藏显示省略号(单行+多行)
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
- CSS文本溢出处理方式
1. 单行文本溢出省略号效果 .ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } <div cl ...
- CSS ... 文本溢出用省略号代替
{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap } text-overflow 属性规定当文本溢出包含元素时发生的事情. c ...
- CSS文本溢出效果&滚动条样式设置
一.文本溢出 1.overflow: hidden; 超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...
- css文本溢出解决方案
1.普通单行截断省略 overflow:hidden; 文字长度超出限定宽度,则隐藏超出的内容) text-overflow:ellipsis;(设置文字在一行显示,不能换行) white-space ...
- #CSS 文本溢出部分显示省略号
单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...
- css 文本溢出显示省略号
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- 【ZeroMQ】1、ZeroMQ(java)入门之Requerst/Response模式
自己最开始是在cloud foundry中接触过消息服务器(nats),或者说是消息中间件,也算是初步知道了一个消息服务器对于分布式的网络系统的重要性,后来自己也曾想过在一些项目中使用它,尤其是在一些 ...
- Android四大组件-Content Provider
http://www.jianshu.com/p/c3ce81b638bd 一.基础回顾. 简介ContentProvider(数据提供者)是在应用程序间共享数据的一种接口机制,虽然我们可以采用文件存 ...
- 服务注册中心Eureka vs Zookeeper vs Consul
前言 在现在云计算和大数据快速发展的今天,业务快速发展和变化.我们以前的单一应用难以应对这种快速的变化, 因此我们需要将以前单一的大应用不断进行差分,分成若干微小的应用或者服务,这就是微服务的思想.但 ...
- 【代码笔记】iOS-字符串替换回车和换行
一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...
- 【读书笔记】iOS-网络-HTTP-URL结构
http://user:password@hostname:port/absolute-path?query. http: 协议 user:password@ 认证 hostname: 主机名 ...
- pms前端结构
后台采用.net MVC框架,前端采用requirejs.整个系统页面布局基本不变,每个页面只改变Main_Content部分. 模板页cshtml: <!DOCTYPE html> &l ...
- ActiveReports 报表中 RDF 文件解析
AcitveReport 提供两种报表模板,XML(RPX)模板和Code-Based 模板.两者都可以用于设计报表. 但是 RDF 格式文件我们大多不是很了解.许多客户在提到 RDF 格式时显得无所 ...
- 7.0 FileProvide适配
7.0 Build.VERSION_CODES.N 24 为什么要适配 在7.0中 ,Uri.from(file),可能会触发FileUriExposedException 和动态权限一样,如果tar ...
- Intellij IDEA去除@Autowired下划线红色提示
Intellij IDEA通过@Autowired注入的对象,在不改变配置的情况下一直有红色下划线,虽然不影响运行,但是跟小Alan一样有强迫症的肯定受不鸟. 那么怎么去除它呢? 解决方式:改变@Au ...
- 【three.js练习程序】创建太阳系
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...