单行，多行文本省略号

单行文本省略号

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

多行文本省略号

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式

时间： 2024-10-10 12:41:36

单行，多行文本省略号的相关文章

单行文本省略号和多行文本省略号

单行文本省略号的设置必须满足,以下四个条件: 1.固定的宽度:width:value; 2.强制在一行显示:white-sapce:nowrap; 3.溢出部分隐藏不可见:overflow:hidden; 4.显示省略号:text-overflow:ellipisis; 多行文本省略号: 1.display:-webkit-box; 2.-webkit-box-orient:vertical; 3.-webkit-line-clamp:3; 4.overflow:hidden; 原文地址:htt

多行文本省略号的实现.html

多行文本省略号的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .d1 { width: 300px; height: 200px; border: 1px solid #ccc; overflow: hidden; text-overf

多行文本省略号

代码奉上: <!DOCTYPE HTML> <html> <head> <style> html, body, p { margin: 0; padding: 0; font-family: sans-serif;} .ellipsis { height: 200px; line-height: 25px; margin: 20px; border: 5px solid #AAA; overflow:hidden; } .ellipsis:before {

多行文本省略号样式丢失，以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'

问题现象 ??使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了.查阅资料,有不少人提出在改样式前后添加注释(后处理程序): /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ ??再次打包,发现样式恢复正常.然后控制台却多出一条警告:'(Emitted value instead

css多行文本省略号问题

已知,单行文本溢出内容用省略号代替,css代码如下: text-overflow: ellipsis; 溢出部分用...代替 white-space: nowrap; //强制在一行显示 overflow: hidden;//溢出隐藏今天刚好遇到关于多行文本溢出,超出部分用...代替的问题,查找了一些资料.原文参考页面底部的链接 1:WebKit浏览器或移动端的页面需要使用webkit私有属性,css草案中没有,因此不是标准的css属性.css代码如下 display: -webkit-bo

多行文本省略号，alt,title,...03/27/9:30

1,导航栏设置,li只设置block和float:left 就可以了,剩下的大小,样式设置a就可以了.2.<img>里面title属性是可以鼠标滑过有文字提醒;alt是在图片加载不出来时有文字,鼠标滑过没有文字提醒, 3,单行文本省略号: overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 4,webkit浏览器或移动端的网页 overflow:hidden;text-overflow:ellipsis;display:-web

多行文本溢出解决方案

前言: 在最近的项目中遇到了多行文本需要进行省略号的设置,由此写下这边博客来记录下. 扩展:前面提到了多行也就来讲讲单行文本的省略号单行省略:text-overflow:ellipsis; w3c官网上说都支持了;所以就提下,关于之前的opera,Firefox不支持的情况在2012年也都支持了;所以可以放心使用了. 具体代码如下 .box{width:200px; white-space:nowrap; text-overflow:ellipsis;overflow:hidden;} 1.如

CSS 多行文本换行，溢出部分省略号

//但行文本省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //多行文本省略号 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

JS实现动态瀑布流及放大切换图片效果(js案例)

整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击图片放大.上下切换效果.HTML布局写的很简单,图片加载主要是在JS中通过访问自定义的JSON字符串来实现.动态瀑布流的原理简单理解就是把新需要加载的图片放在上一排总高度最小的图片或模块下面,实现参差不齐的多栏布局效果.具体效果如下: 做这个案例我用了之前自己封装的框架,所以小伙伴需要到我的另一篇文