设置Div多行文本超出时,以省略号代替
这个文章不错 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多行文本超出时,以省略号代替的更多相关文章
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- Div内部的内容超出部分显示省略号(仅仅只有一行内容)
效果如下:
- htnl5中设置文本单行显示,超出部分打省略号,鼠标移到文本时alt出全部文本内容
Html代码: 1.<span class="my-span" title="无数无数无数无数无数">机构</span> Css样式: ...
- HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)
参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- css----单行文本超出部分显示省略号
width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
- css实现单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: ...
- 几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等
1 div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...
- CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...
随机推荐
- java新手笔记6 示例for
1.计算天数 /*给定一个年月日,计算是一年的第几天 (如输入:2 15 结果:第46天) */ public class Demo1 { public static void main(String ...
- 10.20_web编辑器复制粘贴图片
(1) http://q.cnblogs.com/q/19865/ (2) http://www.oschina.net/search?scope=project&q=FreeTextBox
- nodejs 实现机制
最近在学习nodejs,作为一个从未学过javascript的程序员,把自己学习的过程贴出来,当做记录和总结吧. 1. nodejs的原理: nodejs完全是基于事件轮询机制的一个javascrip ...
- 九度OJ 1453 Greedy Tino -- 动态规划
题目地址:http://ac.jobdu.com/problem.php?pid=1453 题目描述: Tino wrote a long long story. BUT! in Chinese... ...
- ubuntu thinkphp pathinfo 404等问题
这个问题 困扰了我一天,由于对nginx的配置文件中的各种变量不懂.配置起来很麻烦,从网上搜索的,感觉合适自己的不多!!! 找啊找啊..终于找一篇!!!! 我的环境: php ubuntu 12.04 ...
- yaffs2文件系统
1 .yaffs2源码目录文件复制到需要移植的linux内核目录fs/下 同时替换掉源码文件中的Makefile文件跟Kconfig文件. 2.在内核中添加对yaffs2的支持. 3.在make me ...
- Linux 进程编程
Linux通过维护者五个状态来调度进程的运行.这五个状态分别为:运行.可中断.不可中断.僵死.停止 . PID来标识不同的进程的,Linux中每一个进程都有一个唯一的进程号 . PCB块就是一个进程资 ...
- jquery完善的处理机制
使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误.请看下面例子: <script> d ...
- IDEA插件开发基础
由于简易ORM的需要,想要做一些代码自动生成功能(通过右键菜单辅助) 半自动编写代码,故考虑需要开发IDE插件(我司现使用IDEA) 1.例子代码http://confluence.jetbrains ...
- svn-添加忽略文件
svn ps svn:ignore '文件夹名|文件名(不能是文件夹/文件名)' . svn pe svn:ignore . export SVN_EDITOR=/usr/bin/vim #设置环境变 ...