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" ...
随机推荐
- 当堆遇到STL 代码焕发光芒
来自度娘的释义,堆的含义大概是这样的: 感性理解: 堆(英语:heap)是计算机科学中一类特殊的数据结构的统称.堆通常是一个可以被看做一棵树的数组对象.堆总是满足下列性质: 堆中某个节点的值总是不大于 ...
- Access to XMLHttpRequest at 'XXX' from origin 'XX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present o AJAX跨域请求解决方法
今天出现了一个问题找了好久先看代码: 这可能是个BUG吧插入代码: dataType: 'jsonp', crossDomain: true, 最终:
- 【C#数据结构系列】线性表
一:线性表 1.1:定义:零个或多个数据元素的有限序列 1.2: 线性表元素个数n定义为线性表的长度,n = 0称为空表,i 为数据元素ai在线性表中的位序. 1.3:满足线性表的条件:(1):有序, ...
- Gson 使用和原理
使用教程: http://blog.csdn.net/axuanqq/article/details/51441590 http://www.jianshu.com/p/fc5c9cdf3aab 源码 ...
- ActiveMQ 概述
JMS Java Message Service (Java 消息服务), 类似于JDBC的作用. 1.Destination 目的地 2.Provider 生产者 3.Comsumer 消费者 4. ...
- Angular4.+ ngx-bootstrap Pagination 自定义分页组件
Angular4 随笔(二) ——自定义分页组件 1.简介 本组件主要是实现了分页组件显示功能,通过使用 ngx-bootstrap Pagination分页组件实现. 基本逻辑: 1.创建一个分页 ...
- python实现贪婪算法解决01背包问题
一.背包问题 01背包是在M件物品取出若干件放在空间为W的背包里,每件物品的体积为W1,W2至Wn,与之相对应的价值为P1,P2至Pn.01背包是背包问题中最简单的问题.01背包的约束条件是给定几种物 ...
- js-ES6学习笔记-Class(4)
1.Object.getPrototypeOf方法可以用来从子类上获取父类.因此,可以使用这个方法判断,一个类是否继承了另一个类. 2.super这个关键字,既可以当作函数使用,也可以当作对象使用.在 ...
- json_encode无返回结果
今天写php curl模拟客户端访问测试一个抽奖post数据,拿回来的数据是json,使用json_decode函数就是没结果,百度谷歌好久.终于发现是BOM的文件头造成的, 微软为utf-8文件添加 ...
- 【SPL标准库专题(2)】 Iterator
Iterator界面 本段内容来自阮一峰老师再加自己的部分注解 SPL规定,所有部署了Iterator界面的class,都可以用在foreach Loop中.Iterator界面中包含5个必须部署的方 ...