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" ...
随机推荐
- thinkphp 网址后台典型页面
知识点: 1.select a提交后 返回选中项 选中项 value是id 但是要显示name b遍历和列举两种形式 <select name="class_id" clas ...
- 数据结构:IO读写频繁的青睐,B树和B+树
目录 B树 定义及特性 查找顺序 保持平衡 B+树 B+树的插入 使用场景 参考 今天学习B树和B+树,B树和B+树都是基于二叉树的衍生,对于二叉树不太了解的读者可以翻看<数据结构:二叉树> ...
- 乐字节-Java8新特性-接口默认方法之Stream流(下)
接上一篇:<Java8新特性之stream>,下面继续接着讲Stream 5.流的中间操作 常见的流的中间操作,归为以下三大类:筛选和切片流操作.元素映射操作.元素排序操作: 操作 描述 ...
- VMware12创建新的虚拟机及设置硬件环境
一.安装VMware虚拟机 http://jingyan.baidu.com/article/215817f78879c21edb142379.html?qq-pf-to=pcqq.group 二.创 ...
- Hbase学习之概念与原理
一.hbase与列式存储 hbase最早起源于谷歌的一篇BigTable的论文,它是由java编写的.开源的一个nosql数据库,同时它也是一个列式存储的.支持分布式(基于hdfs)的数据库.什么是列 ...
- Thinkphp+ECharts生成柱状图
1.首先进ECharts官网下载echarts.js 点击下载,结合TP5讲解,主要代码在js里面,更多请到ECharts官网 2.引进echarts.js <!DOCTYPE html> ...
- 在ActiveReports页面报表中显示Google地图
有些报表需求中需要我们显示国家.城市等地址信息,在报表中添加地图信息会让报表给最终用户代码更多有效信息. 在报表中可以将地图作为图片添加进来,当一个图片显示在报表中时,该图片必须存放到本地计算机或者服 ...
- 学习MVC之租房网站(十一)-定时任务和云存储
学习MVC之租房网站(十一)-定时任务和云存储 在上一篇<学习MVC之租房网站(十)-预约和跟单>完成了用户的预约看房以及后台操作员对预约看房的跟单操作.接下来会做定时发邮件的功能,并且用 ...
- 标准标签、<jsp:include>、<jsp:forward>
使用方法 标准标签在jsp页面直接编写即可,因为标准标签是JSP规范提供的,所有容器都支持. 被替代性 标准标签的许多功能都可以被JSTL与EL表达式语言所替代. 作用 标准标签可协助编写JSP时减少 ...
- 解决IE下select option不支持display none样式
万恶的IE,option竟然不支持display样式,想到的解决思路有二个: 1.ajax联动查询 2.jQuery的remove().after()方法 方法1的不好之处是初始页面,需要显示全部IP ...