前端_实现文本溢出显示三个小圆点“...“

话不多说 , 直接上代码 :
设置单行文本 :

width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

width: 200px; 1. 设置固定宽度
white-space: nowrap; 2. 文本不折行
overflow: hidden; 3. 设置文本溢出隐藏
text-overflow: ellipsis; 4. 显示三个小圆点

设置多行文本 :

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;             设置多少行开始显示小圆点
-webkit-box-orient: vertical;

前端_实现文本溢出显示三个小圆点“...“相关推荐

CSS溢出显示三个小圆点
溢出显示三个小圆点:必须用的属性 1.给元素一个固定的宽度 2.让文本不折行显示 3.溢出隐藏 4.溢出文本变成三个圆点 //添加一个固定的宽度 width:300px; //让文本不折行 white ...
溢出显示三个圆点基本操作
文本如何实现显示三个小圆点: 1.设置宽度 width:200px; 2.文本不折行 white-space:nowrap; 3.文本溢出隐藏 overflow:hidden; 4.溢出显示三个圆点 ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
web前端基础 html5+css3（九.精灵图，字体图标，css三角，鼠标样式cursor，.轮廓线 outline，vertical-align，文本溢出显示省略号）
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...
关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号单行文本溢出显示省略号方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
css3文本溢出显示省略号的方法
项目中常常有这种需要我们对溢出文本进行"-"显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行语法 o ...
单行文本溢出显示省略号，单行文本溢出显示省略号
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
文本溢出显示省略号效果
在HTML页面中经常会遇到文本溢出,需要将超出的部分隐藏并显示省略号的情况,那么这个文本溢出显示省略号效果是怎么实现的呢?下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法,希望 ...

前端_实现文本溢出显示三个小圆点“...“

前端_实现文本溢出显示三个小圆点“...“相关推荐

最新文章

热门文章