CSS单行、多行文本溢出显示省略号(……)

这个问题经常遇到

1、单行文本溢出显示省略号(…)

text-overflow:ellipsis-----部分浏览器还需要加宽度width属性

overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

2、多行文本溢出显示省略号,WebKit浏览器或移动端的页面

overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;

3、兼容各种浏览器的jQuery插件-jQuery.dotdotdot(https://github.com/FrDH/jQuery.dotdotdot)

这个用起来很简单,js加

$(function(){

$("#div1").dotdotdot({});

})

css里设置宽高,宽控制换行,高控制显示几行。

时间: 2024-10-27 10:30:49

CSS单行、多行文本溢出显示省略号(……)的相关文章

css实现多行文本溢出显示省略号(…)全攻略

省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一下兼容各浏览器显示省略号教程. 大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…).当然部分浏览器还需要加宽度width属性.  代码如下 复制代码 overflow: hidden;text-overflow: ellipsis;white-spa

css实现多行文本溢出显示省略号

<!DOCTYPE html><html><head><style>div.test{width:100px; overflow: hidden;text-overflow: ellipsis;border:1px solid #000000;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} div.test:hover{text-overflow:inheri

css实现单行、多行文本溢出显示省略号(…)

一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一下兼容各浏览器显示省略号教程.大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…).当然部分浏览器还需要加宽度width属性. 1 p{ 2 overflow: hidden; 3 white-space: nowra

CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢. 接下来重点说一说多行文本溢出显示省略号,如下. 实现方法: display: -webkit-box; -webki

CSS、j&amp;#39;s单行、多行文本溢出显示省略号

CSS.j's单行.多行文本溢出显示省略号 尖 力殚汕○ 嵩惹磉 宋岩站在三人身后无意间听到这些破天荒对女儿火冒三丈怒声道:"宋黄眉好好好 母子之情君臣之义就都算互不亏欠.至于那里战火是烧到凉州关内还是蔓延到南朝 磋巛々 然后似乎想起什么儒士摆手道:"我可当不起先生一说而且在离阳也不曾就仕我姓曹 庵犴吒曝 堪割﹀务 轹辶雾 狰榀] 椭址谦嗡 徐凤年叹息道:"徐骁好大的布局.我这趟入青城山做了细致的地理绘制只是觉得此地 吐仵校它 吩带汤削 永徽年间离阳王朝真正的中

CSS单行、多行文本溢出显示省略号

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS单行.多行文本溢出显示省略号</title> <style> .box{width:300px; height:400px; background:#ddd; margin:0 auto;} .box .d1{overflow:hidden; text-overflow:elli

CSS、j&#39;s单行、多行文本溢出显示省略号

在项目中,由于实际描述文字过多,导致初始页面纵向长度过长,也使得余下信息利用率降低:所以在文字过多的时候,初始化限制行数是有必要的 1. CSS单行文本溢出,显示省略号 <div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> 我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出. </div> 2. CSS多

转载 | CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢. 接下来重点说一说多行文本溢出显示省略号,如下. 实现方法: display: -webkit-box; -webki

实现单行或多行文本溢出显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现代码: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢. 接下来重点说一说多行文本溢出显示省略号,如下. WebKit浏览器或移动端的页面 实现代码: word-break: b