这个文章不错 http://www.css88.com/archives/5206

css中有一个属性: text-overflow,可以设置文本超出指定长度后的文本截取样式。

下面是从 w3shcool截的图:

但是 text-overflow 有一个缺陷,它只能对单行文本起效果,如果是多行文本就不好使了。

如果想对多行文本也实现以省略号代替超出部分的话,可以使用下面方法(貌似局限于webkit内核):

max-height:100px;       /*首先设置div高度*/

overflow:hidden;           /*设置超出部分隐藏*/

text-overflow:ellipsis;    /*然后设置文本隐藏方式*/

/*为了实现多行文本也有效果要设置如下3个属性,具体属性的含义我还不是很清楚:*/

display:-webkit-box;

-webkit-line-clamp:3;    /*只显示3行,如果不设置这个属性,会出现文本被拦腰截断的现象*/

-webkit-box-orient: vertical;

最后的效果:

设置Div多行文本超出时,以省略号代替的更多相关文章

  1. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  2. Div内部的内容超出部分显示省略号(仅仅只有一行内容)

    效果如下:

  3. htnl5中设置文本单行显示,超出部分打省略号,鼠标移到文本时alt出全部文本内容

    Html代码: 1.<span class="my-span" title="无数无数无数无数无数">机构</span> Css样式: ...

  4. HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  5. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. css----单行文本超出部分显示省略号

    width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

  7. css实现单行、多行文本超出显示省略号

    前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: ...

  8. 几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等

    1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...

  9. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

随机推荐

  1. javascript 基础2第12节

    1. <html> <head> <title>javascript基础</title> </head> <body> 1.Nu ...

  2. 工作中的问题解决 -- (win2003 asp.net) Session和带页面回传的方法无法正常使用解决方案

    公司BP&IT项目组.从上上个月成立开始开发BP&IT软件.这个月开始测试我悲剧的发现他尽然不支持我电脑上的IE11.半个多月还没解决 我们先来分析下原因首页 登陆页面正常浏览 htt ...

  3. linux管理网络连接指令

    ethtool eth0  查看 eth0对应网卡的设置 ethtool -i eth0 查看 eth0网卡的驱动信息 ethtool -S eth0 查看网卡的统计信息 ethtool -s eth ...

  4. DOM Ready 详解

    DOM Ready 概述 熟悉jQuery的人, 都知道DomReady事件. window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致wind ...

  5. 《C和指针》章节后编程练习解答参考——6.3

    <C和指针>——6.3 题目: 编写一个函数,把参数字符串中的字符反向排列. 函数原型: void reverse_string(char *string); 要求: 使用指针而不是数组下 ...

  6. 黑马程序员-------.net基础知识四

    常量(静态常量------compile-time) 语法:const 类型 常量名 =常量值: 例: [csharp] view plaincopyprint? { const double PI= ...

  7. 15个Docker基本命令及用法

    Docker入门教程:15个Docker基本命令及用法   本文中,我们将学习15个Docker命令以及命令的用法和功能,并通过实践学习它是如何工作的. AD:51CTO 网+ 第十二期沙龙:大话数据 ...

  8. App评分

    //应用实现评论跳转的两种方法: //第一种: //在iOS6.0前跳转到AppStore评分一般是直接跳转到AppStore评分 //NSString *evaluateString = [NSSt ...

  9. [转载]做一个 App 前需要考虑的几件事

    本文转自http://limboy.me/tech/2016/07/06/starting-an-app.html ========================================= ...

  10. 关于Java(不同工具或平台与“Hello World”)

    对于任何编程语言,都最常见的入门应用: Hello World NetBeans 和 “Hello World” 编写 Java 程序前,先要准备好: Java SE Development Kit ...