限制在一个块元素显示的文本的行数. -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 为了实现该效果,它需要组合其他外来的WebKit属性.常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 . -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 . text-overflow,可以用来多行文…
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 参考地址:http://www.css88.com/archives/5206…
一行文字溢出以...形式隐藏 我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出以...形式隐藏(针对webkit内核浏览器) css代码如下: display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; 注意!-webkit-line-clamp:2; 这是2…
单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{$vo.title}</h6> 多行文字溢出,CSS样式 <p style="width:360px;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:…
声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. 对于单行文字, 很简单.(详见css3产考手册 进入) css: .oneLine { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 对于多行文字, 上面的代码就不适用了. web-kit based 的浏览器提供了对这个特殊需求的支持. css: .twoLine { overflow:…
一.应用 CSS代码: .box { width: 100px; display: -webkit-box; -webkit-line-clamp:; -webkit-box-orient: vertical; overflow: hidden; } HTML代码: <div class="box"> 美国进口Culturelle康萃乐益生菌30片儿童水果味LGG益生菌咀嚼片 </div> 效果: 美国进口Culturelle康萃乐 益生菌30片儿童水果味LGG…
一.常用META 1. 添加到主屏后的标题(IOS) 1 <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) 1 2 <meta name="apple-mobile-web-app-capable" content="yes…
在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字排布效果. html代码如下: <div class="container"> <div class="box"> <div class="box-content"> <h5 class="box-…
学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>.(增加无意义标签不建议使用) <ul> <li style="float: left;"></li> <li style="float: left;"></li> <li style="floa…
有时候容器的宽度是固定的,但要显示的文字有点多,就需要将多余的文字隐藏,而且为了表示还有字没有显示,用省略号表示. 类似这样: 单行文字 单行文字截断比较明显: .truncate { width: 250px; /* or max-width */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行文字 多行文字截断就比较棘手,比如对于下面的代码段: <div class="module"&g…