多行文本溢出隐藏

今天突然接到开发的需求,需要一个段落的隐藏,于是理所应当的想到了：text-overflow:ellipsis;overflow:hidden; 结果可想而知只剩下第一行孤零零的杵在那，于是乎准备再加一个 word-break :break-all;强制换行结果没逼用啊

于是查了一会发现了chrom 自带的css3属性：

还是不错的不过chrom好用了其他的呢毕竟还要兼容ie 于是只能选择插件来实现了： clamp.js 方法很简单：

短短几行就能实现,还是很不错的

时间： 2024-09-11 00:44:17

多行文本溢出隐藏的相关文章

文字溢出隐藏，隐藏的问字用省略号表示

之前在写页面的时候用的都是单行文字溢出隐藏,今天遇到了多行文字溢出隐藏,溢出部分用省略号.我通过查阅一些资料整理了一下,拿出来与大家分享一下. 单行文本的溢出隐藏对于单行文本溢出隐藏,text-overflow: ellipsis 就能完美的解决,不过在使用他时,一定要结合 overflow: hidden和 white-space: nowrap;,我有时就忘记写了,导致效果出不来,还让我找了半天. 1 <!DOCTYPE html> 2 <html> 3 <he

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

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…).当然部分浏览器还需要加宽度width属性. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果. WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用W

单/多行文本溢出显示省略号+清除浮动

1.文本溢出显示省略号 (1)单行文本溢出,只需要给文本所在的容器设置如下样式: width:100px;/*容器一定要设置固定宽度*/ white-space:nowrap;/*强制一行内显示*/ overflow:hidden;/*溢出隐藏*/ text-overflow:ellipsis; /*显示省略号*/ 注意:即使给上面文本所在的容器设置了足够高的高度,也会强制变成单行内显示. (2)多行文本溢出,通过本人亲自试验,总结了以下几种方法: ①只适用于Webkit内核的浏览器,给文本所在

多行文本溢出显示省略号

首先对之前的一篇文章进行一点补充. 之前的那篇叫做“强制span不换行”.当时只是实现了功能,并不知其所以然.最近学习了一点页面制作的知识,对原理有了些许了解.对于单行文本,实现溢出不换行并以省略号表示可以完全通过css实现,代码如下: /*处理文本的空白字符,使其不自动换行*/ white-space: nowrap; /*溢出的部分隐藏*/ overflow:hidden; /*显示省略符号来代表被修剪的文本*/ text-overflow: ellipsis; 其实只要上面的代码合作,就

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

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

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

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

【CSS/JS学习】如何实现单行／多行文本溢出的省略（...）--老司机绕过坑道的正确姿势

引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: 也可能是多行的: 下面我就给大家展示如何简单或优雅地实现这种需求单行文本溢出的省略先上代码 <div style = 'width:400px; height:40px; border:1px solid red;'> <p style='overflow: hidden; text-overflow: ellipsis; white-spac

多行文本溢出显示省略号…

>单行文本的溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; >多行文本溢出显示省略号 WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-cl

css文本溢出隐藏显示省略号（单行+多行）

文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ overflow: hidden;//文本溢出隐藏 text-overflow: ellipsis;//文本溢出显示省略号 white-space: nowarp;//不换行 } 二. 在Webkit内核的浏览器中实现多行文本隐藏并显示省略号在webkit内核中,可以利用-webkit-