单(多)行文本溢出显示省略号...

一、单行文本

width:XXXpx;overflow: hidden; //溢出隐藏
text-overflow: ellipsis; //显示省略号来代替被修剪的文本
white-space: nowrap; //不换行

 注:white-space:normal(默认,空白会被浏览器忽略)|pre(空白会被浏览器保留,行为方式如同<pre>标签)|nowrap(文本不换行,直到遇到<br />标签)|pre-wrap(保留空白并正常换行)|pre-line(合并空白并换行)|inherit(继承);

二、多行文本

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box; //将对象作为弹性伸缩盒子模型显示 。
-webkit-line-clamp: 2; //用来限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 。

  

时间: 2024-10-05 07:38:20

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

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

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

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

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

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单行、多行文本溢出显示省略号(……)

这个问题经常遇到 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-

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

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

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

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