css 多出一行或多行后显示...的方法

一行超出显示...

1 .mui-ellipsis {
2     overflow: hidden;
3     white-space: nowrap;
4     text-overflow: ellipsis;
5 }

两行超出的显示...

1 .mui-ellipsis-2 {
2     display: -webkit-box;
3     overflow: hidden;
4     white-space: normal!important;
5     text-overflow: ellipsis;
6     word-wrap: break-word;
7     -webkit-line-clamp: 2;
8     -webkit-box-orient: vertical;
9 }
时间: 2024-12-04 18:31:10

css 多出一行或多行后显示...的方法的相关文章

javascript超过容器后显示省略号效果(兼容一行或者多行)

javascript超过容器后显示省略号效果 在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(…)显示,这样,按照习惯,人们都会知道这儿有文字被省略了.css中有个属性叫做text-overflow:ellipsis;比如使用css可以这样写: {width:27em; white-space:nowrap; text-overflow:ellipsis; -o

未能启用约束。一行或多行中包含违反非空、唯一或外键约束的值。

来源:http://www.cnblogs.com/JuneZhang/archive/2013/01/10/2853981.html 今天运行项目,提示“未能启用约束.一行或多行中包含违反非空.唯一或外键约束的值.”的异常信息. 在网上找了查了一些原因:http://www.cnblogs.com/muzihai1988/archive/2011/05/04/2036502.html 原因分析:强类型的DataTable和SQL语句查询出的结果不匹配. 简单说就是强类型的DataTable比S

CSS中块级元素和行内元素

文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><). 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流

【c语言】在终端输入多行信息,找出包含&quot;ould&quot;的行,并打印改行

/* 在终端输入多行信息,找出包含"ould"的行,并打印改行. 如: Au,love could you and I with fate conspire To grasp this sorry scheme of things entire, Would not we shatter it to bitd - and then. 在终端输出上述的文字,输出 Au,love could you and I with fate conspire Would not we shatter

点击最后一行可以实现行自增效果的表格代码

点击最后一行可以实现行自增效果的表格代码:现在任何事务都追求效率和人性化,当然网页效果也是如此,如果一个可以编辑数据的表格,编辑到最后一行的时候,点击可以自动添加一行,这样算是一个比较人性化的效果,可以免去一丝劳顿之苦,下面分享一段这样的代码.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

CSS实现的鼠标悬浮整行背景变色代码

CSS实现的鼠标悬浮整行背景变色代码:在新闻列表形式的不居中,为了清晰的分辨每一行,一般当鼠标悬浮在一行上的时候,能够实现当前行整行变色,下面就通过代码实例简单介绍一下如何实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/

移动端文本超出设定行数后省略的方法

因为移动端绝大部分是WebKit内核的浏览器,如果纯粹的要实现文本在超出规定行数后,其余内容省略并加上"...",可以直接使用WebKit私有属性:-webkit-line-clamp来实现 css代码 .box{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } html代码 <div c

一款灰色风格的Css滑出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

hivepython 实现一行转多行

案例1: ==效果等同于一行转多行 数据表名称:zhangb.gid_tags 数据格式,每行是2个字段,(gid,tags) ,可能有脏数据,分隔符为"\t", ANDROID-9de77225cadb4319adfc1b1fe51c54f0        h65010000,014200,018100,011300,0200 ANDROID-9de77dfdbbab42679eed11f4e48c0ffc         022000,026400,022400,016400,01