这个文章不错 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. Ngen生成Native代码实战及优缺点分析

    先科普一下,.Net是一个用于Windows的托管代码模型,用于高效构建具有视觉上引人注目的用户体验的应用程序.但这个模型生成的代码并非可执行代码,而是由.Net公共语言运行库环境执行的IL代码.所以 ...

  2. 如何在Angular2中使用jquery

    首先在index.html中引入jquery文件 <script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.js"> ...

  3. 关于SringMvc的参数的传递

    * @RequestMapping这个注解代表要请求的方法 * value值表示请求的 方法名*********@RequestParam(value="username")代表请 ...

  4. maven一些问题

    maven一些问题 - ljhzzyx的日志 - 网易博客 1. The container 'Maven Dependencies' references non existing library ...

  5. 01_C语言基础

    内容提要: 1. C语言概述2. 数据类型.运算符与表达式3. C语言程序结构 4. VC6.0使用练习 知识详解01:C语言的历史 1. C语言与其它语言比较 汇编语言: (1).可直接对硬件进行操 ...

  6. linux重新增加硬盘容量

    1.先用df -h查看硬盘使用情况 2.fdisk -l查看分区情况 表示还没有挂载 3.fdisk /dev/vdb进行分区 4.mkfs.ext3 /dev/vdb进行格式化 5.mount /d ...

  7. IOS 多线程之GCD

    参考:http://www.cnblogs.com/wendingding/p/3806821.html <<Objective-C基础教程>> 第二版 一 简介 GCD 全称 ...

  8. source insight添加汇编文件.s

    (1) 做ARM嵌入式开发时,有时得整汇编代码,但在SIS里建立PROJECT并ADD TREE的时候,根据默认设置并不会把该TREE里面所有汇编文件都包含进来,默认只加了.inc和.asm后缀的, ...

  9. 在虚拟机的linux中利用VMware Tools实现与windows共享文件

        很多人都知道安装"VMware Tools"可以实现与windows共享,但是其实它的功能远不止此.安装了"VMware Tools"后,虚拟机的网络. ...

  10. bzoj 2693: jzptab 线性筛积性函数

    2693: jzptab Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 444  Solved: 174[Submit][Status][Discus ...