CSS div内文字显示两行,超出部分省略号显示
1. 概述
1.1 说明
在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理。使用识别码/前缀-webkit进行处理可直接得到相应效果。
1.2 -webkit
WebKit内核的css前缀为“-webkit-”,Comodo Drangon(科摩多龙),苹果,安卓,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速版,SRWare Iron,猎豹浏览器,RockMelt,QQ浏览器都可识别。
备注:IOS版的微信、android版本的X5内核,都是采用webkit内核。
2. 代码
2.1 代码示例
text-overflow属性规定当文本溢出包含元素时发生的事情
- ellipsis 显示省略符号来代表被修剪的文本(单行溢出)
- clip 修剪文本
- string 使用给定的字符串来代表被修剪的文本
- -o-ellipsis-lastline 从 Opera 10.60 开始有此值,但不在标准之内
-webkit-line-clamp WebKit支持,不在标准之内(ie和火狐不兼容)
.fontClass {
color: #333;
font-size: 28rpx;
line-height: 40rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
}
CSS div内文字显示两行,超出部分省略号显示的更多相关文章
- CSS——div内文字的溢出部分用省略号显示
使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
- css 文字展示两行 其余的省略号显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS——div垂直居中及div内文字垂直居中
最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...
- css实现文本超出部分省略号显示
一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...
- 关于DIV内文字垂直居中的写法
最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法, 因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法: dis ...
- div内文字显示两行,多出的文字用省略号显示
用-webkit-私有属性,代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;disp ...
- CSS+DIV实现文字一行内显示,并且过多的文字以点来代替
有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...
- 基于CSS+dIV的网页层,点击后隐藏或显示
一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...
随机推荐
- python + django + echart 构建中型项目
1. python生产环境, 多层modules 导入问题: 多个modules 如何导入不同级别的包: 在每个modules下新建 __init__.pyimport os, sys dir_myt ...
- mybatis将传入的Integer类型的0被识别成空字符串的问题
更改mapper文件的sql如下: <if test="interger != null"> interger= #{interger} </if> 原因: ...
- WIN10解决:失败 – 检测到病毒文件下载失败问题
欢迎访问我的个人博客四个空格,本文永久链接移至:WIN10解决:失败 – 检测到病毒文件下载失败问题 这个是Windows防火墙的原因,直接按WINDOWS键,输入windows,窗口搜索:Windo ...
- Jetson TX1 compile pytorch issues
1. c++: internal compiler error: Killed (program cc1plus) reason: memory out, need swapfile 2. NCCL ...
- nodejs 搭建本地静态服务器
1. http-server 参看 https://www.npmjs.com/package/http-server 使用http-server搭建本地静态服务器 全局安装http-server n ...
- 快速沃尔什变换(FWT)及K进制异或卷积&快速子集变换(FST)讲解
前言: $FWT$是用来处理位运算(异或.与.或)卷积的一种变换.位运算卷积是什么?形如$f[i]=\sum\limits_{j\oplus k==i}^{ }g[j]*h[k]$的卷积形式(其中$\ ...
- 【CSA49G】【XSY3315】jump DP
题目大意 有一个数轴.yww 最开始在位置 \(0\).yww 总共要跳跃很多次.每次 yww 可以往右跳 \(1\) 单位长度,或者跳到位置 \(1\). 定义位置序列为 yww 在每次跳跃之后所在 ...
- 使用apidoc生成项目文档
[1]npm install apidoc -g 全局安装apidoc [2]apidoc -v 查看是否安装成功 [3]apidoc.json apidoc的项目级配置文件,它必须位于整个工程目录顶 ...
- 纠错式教学法对比鼓励式教学法 -----Lily、贝乐、英孚,乐加乐、剑桥国际、优学汇、北外青少
一.关于两种英语教学法的争议 在英语教学方面,主要有纠错式教学法(目前主要对应国内听说读写四位一体的教学法)和鼓励式教学法(目前对应国内听说为主的教学法),这两种教学方法其实是各有千秋,各有利弊的. ...
- DirectX11 With Windows SDK--25 法线贴图
前言 在很早之前的纹理映射中,纹理存放的元素是像素的颜色,通过纹理坐标映射到目标像素以获取其颜色.但是我们的法向量依然只是定义在顶点上,对于三角形面内一点的法向量,也只是通过比较简单的插值法计算出相应 ...