css(3)显示省略号

需设置宽度才能溢出显示省略号。 
单行文本:

.am-text-truncate {
    word-wrap: normal; /* for IE */
    text-overflow: ellipsis;    //当文本溢出显示省略符号来代表被修剪的文本。
    white-space: nowrap;  //规定段落中的文本不进行换行
    overflow: hidden;
}

  

word-wrap: normal / break-word; 
normal 只在允许的断字点换行(浏览器保持默认处理)。 
break-word 在长单词或 URL 地址内部进行换行。

多行文本:

.am-text-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

  要将height设置为line-height的整数倍,防止超出的文字露出。

时间: 2024-07-29 15:28:03

css(3)显示省略号的相关文章

css 超出部分显示省略号

代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解释:简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden:),然后出现省略号( text-overflow: ellipsis). text-ellipsis是一个特殊的样式,

CSS换行文本溢出显示省略号

现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素则需要使用display设置为inline-block; 下面是对a,span等行内元素的使用CSS换行文本溢出显示省略号的比较准确的用法: a,span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-s

css text-overflow溢出文本显示省略号

<div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象内文本溢出时显示省略标记</nobr></div> 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...)

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

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

CSS自动换行、强制不换行、强制断行、超出显示省略号

P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,但是并没有发现本质原因,本质在于,我当时获取的数据是一长串的数字,浏览器应该是对数字和英文单词处理方式相近,不会截断. 先给出各种方式,再具体介绍每一个属性. 强制不换行 p { white-space:nowrap; } 自动换行 p { word-wrap:break-word; } 强制英文单词断行

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

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

css 控制文字超出部分显示省略号

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

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

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

css文字超出自动显示省略号

只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } css文字超出自动显示省略号显示省略号 css文字超出自动显示省略号 css文字超出自动显示省略号显示省略号 02.针对table table{ table-layout:fixed; } table td{ word-break:keep-all;/* 不换行