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内文字显示两行,超出部分省略号显示的更多相关文章

  1. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  2. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

  3. css 文字展示两行 其余的省略号显示

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

  4. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  5. css实现文本超出部分省略号显示

    一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...

  6. 关于DIV内文字垂直居中的写法

    最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法, 因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法: dis ...

  7. div内文字显示两行,多出的文字用省略号显示

    用-webkit-私有属性,代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;disp ...

  8. CSS+DIV实现文字一行内显示,并且过多的文字以点来代替

    有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...

  9. 基于CSS+dIV的网页层,点击后隐藏或显示

    一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...

随机推荐

  1. jstl的foreach标签

    jsp支持丰富的jstl标签语言(需要jar包支持),其中list循环(迭代)用的是<c:forEach></c:forEach>标签. 这个标签的作用就是迭代输出标签内部的内 ...

  2. html实体命名

    本文转自:http://www.cnblogs.com/kiter/archive/2011/08/05/2128309.html (转发备用) 1.特色的 © © © 版权标志 |   | 竖线,常 ...

  3. g.DrawImage图片合成在本机可以,在服务器一直报内存不够

    g.DrawImage图片合成在本机可以,在服务器一直报内存不够,发现是这个要设为false

  4. C语言博客作业02--循环结构

    1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 经过本周学习,对c循环结构有了深入,无论是单层循环结构还是嵌套循环结构的问题,我都学会有一定的解决能力, ...

  5. 搭建alpine仓库 提供apk包

    搭建alpine私有仓库从官方拉取alpine所有的包 wget -r -np -nH http://nl.alpinelinux.org/alpine/v3.5/main/x86_64/ wget ...

  6. CF1153 F. Serval and Bonus Problem(dp)

    题意 一个长为 \(l\) 的线段,每次等概率选择线段上两个点,共选出 \(n\) 条线段,求至少被 \(k\) 条线段覆盖的长度期望. 数据范围 \(1 \le k \le n \le 2000, ...

  7. 关于Aop切面中的@Before @Around等操作顺序的说明

    [转]http://www.cnblogs.com/softidea/p/6123307.html 话不多说,直接上代码: package com.cdms.aop.aspectImpl; impor ...

  8. 51nod1237 最大公约数之和

    题目链接 题意 其实就是求 \[\sum\limits_{i=1}^n\sum\limits_{j=1}^ngcd(i,j)\] 思路 建议先看一下此题的一个弱化版 推一下式子 \[\sum\limi ...

  9. 细说java系列之HashMap原理

    目录 类图 源码解读 总结 类图 在正式分析HashMap实现原理之前,先来看看其类图. 源码解读 下面集合HashMap的put(K key, V value)方法探究其实现原理. // 在Hash ...

  10. [译]ASP.NET Core揭秘 - Razor Pages

    原文 什么是Razor Pages? Razor pages是ASP.NET Core 2.0的新特性,它被设计用来更快的开发页面,比传统的MVC模式更便捷. 创建项目 为了使用Razor Pages ...