这个文章不错 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. 03_MySQL中文乱码处理_01_MySQl数据库字符集知识

    [MySql数据库常见字符集介绍] 在互联网环境中,使用MySql时常用的字符集有: [如何选择合适的字符集] 1.如果处理各种各样的文字,发布到不同语言的国家地区,应选Unicode字符集,对MyS ...

  2. 2016.08.06计算几何总结测试day1

    T1 bzoj1132[POI2008]TRO 还是太弱了....测试时看到这题直接懵逼,极角排序什么的根本想不起来,只会n^3暴力怎么破......不过竟然有84.....QAQ 正解是n^2log ...

  3. 排序算法——QuickSort、MergeSort、HeapSort(C++实现)

    快速排序QuickSort template <class Item> void quickSort (Item a[], int l, int r) { if (r<=l) ret ...

  4. VMware中Ubuntu忘记密码的解决办法

    在VMware中安装了Ubuntu 11.04,经过了一个长假,再次登录的时候居然进不去了,一开始不知道怎样在虚拟机中进入到Grub启动界面,网上搜索了一番,按照以下步骤重新为用户设定了新密码. 重启 ...

  5. Lighttpd日志打印格式

    检查lighttpd打印的日志时,有些字段意义模糊,就找了个对照说明,备份一下 原文地址:http://redmine.lighttpd.net/projects/1/wiki/Docs_ModAcc ...

  6. CentOS 6.4 使用YUM 安装MySQL5.5

    1.首先需要下载Yum的支持包: http://dev.mysql.com/get/mysql-community-release-el6-5.noarch.rpm 2.下载完成后将Yum库导入到你的 ...

  7. Leetcode 解题 Longest Substring without repeating charcater python

    原题: Given a string, find the length of the longest substring without repeating character For example ...

  8. WPF中嵌入Flash(ActiveX)

    1. 建立 WPF Application. 首先,建立一个名为 FlashinWPF 的 WPF Application 2. 设置 Window 属性. 在 XAML 中修改 Window 的属性 ...

  9. makefile debug

    1. 使用warning指令 warning 是个不错的命令,可以打印出消息,来判断makefile执行的流程 2.使用ifeq ifneq 当makefile被多次调用到的时候,如果都输出warni ...

  10. 快速发展的Swift是否将淘汰Objective-C?

    随便拉上一个果粉说说这一年来苹果公司的成就,Apple Watch肯定排第一,再下来是iPhone破销量纪录及苹果30亿美元收购Beats Electronics,消息灵通的人说不定还会提到Apple ...