CSS实现div内文字显示两行，超出两行部分省略号显示

在搭建前台文章列表中，需要实现div内文字显示两行，超出的则省略号显示。

找了很多，都貌似只能一行显示。最后在百度知道找到答案。

答案转自百度知道，题主的自答。

用的是-webkit-私有属性。text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

另有回答是通过jquery来实现的下载Jquery插件：jQuery ellipsis plugin调用方法：$(document).ready(function() {　　$(‘.ellipsis‘).ellipsis();}
时间： 2025-01-07 04:21:08

CSS实现div内文字显示两行，超出两行部分省略号显示的相关文章

【CSS笔记】使文字在一行显示，超出部分用省略号显示

CSS代码: text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 说明: text-overflow:用来设置是否使用一个省略标记(···)标示对象内文本的溢出. white-space:nowrap;强制文本在一行内显示. overflow:hidden;溢出内容为隐藏. 必须三者同时用的时候才会实现溢出文本显示省略号 附:多行显示的方法: overflow: hidden; text-overflow: ellipsis;

CSS div内文字显示两行，超出部分省略号显示

1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKit内核的css前缀为“-webkit-”,Comodo Drangon(科摩多龙),苹果,安卓,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速版,SRWare Iron,猎豹浏览器,RockMelt,QQ浏览器都可识别. 备注:IOS版的微信.android版本

常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis; /* 超出部分显示为... */ 鼠标经过图片放大 .team-img img{ width:188px; height: 200px; border-radius: 50%; transition: all 1.2s; -moz-transition: all 1.2s; -webkit-tr

div内文字显示两行，多出的文字用省略号显示

用-webkit-私有属性,代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; 另外还有其他方法可以解决这个问题:1.通过js来控制字数,然后截取文字下面是一个例子: <!DOCTYPE html><html><head&

（转载）div内文字超过宽度时自动换行

解决方法:div 设置宽度后 style加上 word-break:break-all; 或者 word-wrap:break-word; 区别:(http://zhidao.baidu.com/link?url=yx2WfaUWYrx0TrUFiOFYXuFh7G-bDWKMUC195o4PmUE-Bot_i8BroTXKijsw7OBAF4TARnTdwr8iJY4XItnw6_) word-break:break-all: 例如div宽200px,它的内容就会到200px自动换行,如果该行

text-overflow:ellipsis实现超出隐藏时省略号显示

text-overflow:ellipsis;要达到的效果是:文字超出容器宽度时,文字被隐藏的文字用省略号代替.所以该属性只能用于块状元素或行内块元素中,对行内元素是不起作用的. 一般和white-space:noworp;(强制文字不换行),overflow:hidden;(文字溢出隐藏),一起使用. eg1: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5

多行文本超出部分以省略号显示

看到这样的效果,首先想到的是css3,真的能解决吗?百度了一下还真的可以 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; BUT,这是什么? -webkit- 这是指的在WebKit内核的浏览器才能看到的效果.所以这就是没有用的. 然后又看了其他的很多写法,并没有实现自己想要的效果.决定用js来控制 <p c

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

Html代码: 1.<span class="my-span" title="无数无数无数无数无数">机构</span> Css样式: .myspan{ width: 100px; height: 25px; overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } 运行效果:

文本显示中的换行和省略号显示问题

在工作中经常会遇到文本显示的一些样式调整,今天就来说说文本显示的几个问题 . 一.强制换行的方法 1 word-break 是css3中的文本属性,规定非中日韩文本的换行规则,规定自动换行的处理方法,通过这个属性,可以让浏览器在特定的位置断行.w3c中有3个取值. word-break: normal|break-all|keep-all;normal是浏览器默认的自动换行的值.break-all 允许在单词内换行.keep-all 只能在半角空格或连字符处换行.但如果想断行的话,一定要设置宽度