css 控制文字显示两行,多余用省略号手机端

p { width:100px; position:relative; line-height:20px; /*行高为高度的一半,这样就是两行*/ height:40px; overflow:hidden; } p:after { /*使用伪元素*/ content:"..."; position:absolute; bottom:0; right:0; background:#FFF; /*这个背景色要和p的背景色一致,也就是做个假^_^*/ padding-left:6px; /*…

CSS控制文字显示一行，超出显示省略号

这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显示省略号”,我自己做的时候,因为场景的div宽度是固定的,我就直接截取了文本的前 X 个字符显示,类似于这样: str = str.slice(0,10) +"……"'; 其实这样做有很大的弊端,网站每次数据刷新的时候,都要这样做一次,最后发现可以用css实现,如下所示: <!DOC…

css控制文字显示长度，超过用省略号替代

.line_text { width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } <span class="line_text">客户端解决标题显示太长省略多余部分并加省略号的样式</span> <li class="line_text">客户端解决标题显示太长省略多余部分并加省略号的样式</li> <div clas…

css 控制文本显示两行超过省略号显示

display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; overflow: hidden;…

使用css控制文字显示几行并且剩余部分隐藏（移动端和PC端同样适用）

前言有些需求需要我们控制一段文本最多显示几行,就像逛淘宝京东的评价楼层一样,有时可能还需要隐藏剩余部分,这样的需求我们怎么来解决呢? 解决办法我们完全可以使用css来解决这一需求 1. 解决文本显示行数 word{ display:-webkit-box // 使其变为伸缩盒 -webkit-line-clamp:2 // 设置其要显示的行数 -webkit-box-orient:vertical // 规定子元素的排列方式 } 2. 隐藏剩余部分 word{ display:-webkit…

css控制文字长度，超出长度显示...

css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }…

--css 控制文字多使用省略号

--css 控制文字多使用省略号.overflowPoint{ text-overflow:ellipsis;width: 200px;overflow: hidden;}<div class="overflowPoint"> <nobr> 熟悉目的地:<b>地方地方地方地方的发地方地方地方地方的发地方地方的地方地方放的是地方地方地市</b> </nobr></div>…

css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行

为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在列表样式里添加css,如下图. 修改后效果: 正文开始 (1).文字超出一行,省略超出部分,显示'...' 如果这种情况比较多,可以取一个切合作用的类名用于复用. .line-limit-length { overflow: hidden; text-overflow: ellipsis; whit…

2016/04/13 ①html 中各种分割线------------------------------------------ ② 控制文字显示

①各种分割线Html代码 1.<HR> 2.<HR align=center width=300 color=#987cb9 SIZE=1>align 线条位置(可选left.right.center):width 线条长度:color 颜色:size 厚度二.特效(效果并不是孤立的,可相互组合)1.两头渐变透明:<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width=&q…

css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI",Tahoma,Helvetica,Sans-Serif,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5;}…

CSS div内文字显示两行，超出部分省略号显示

1. 概述 1.1 说明在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKit内核的css前缀为“-webkit-”,Comodo Drangon(科摩多龙),苹果,安卓,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速版,SRWare Iron,猎豹浏览器,RockMelt,QQ浏览器都可识别. 备注:IOS版的微信.android版本…

纯css控制文字2行显示多余部分隐藏

在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 3行代码搞定,这个很常见.但是要是2行文字显示多余隐藏呢,我之前在网上搜到的很多说什么用js去控制,用php控制...等等诸如此类的复杂方法,为什么不能同样用css去控制呢?后来找到答案了,用css同样可以去控制2行文字显示多余隐藏. text-overflow…

div内文字显示两行，多出的文字用省略号显示

用-webkit-私有属性,代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; 另外还有其他方法可以解决这个问题:1.通过js来控制字数,然后截取文字下面是一个例子: <!DOCTYPE html><html><head&…

CSS控制LI行字符溢出用省略号取代

<!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-…

CSS - 实现文字显示过长时用省略

一.添加-文字显示超出范围时隐藏属性 overflow:hidden; 二.添加-超出文字省略号属性 text-overflow:ellipsis; 三.添加-文字不换行属性 white-space:nowrap;…

CSS控制图片显示区域

优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现方式有多种,一种是把识别出来的人脸截取成多张小图片,一种是把人脸的位置找出来,通过css样式来控制显示,可以用background-image.background-repeat.background-position三个属性实现,简单demo: <div style="width:37px;…

css 文本单行显示溢出时出现省略号多行显示溢出时出现省略号首行缩进

一.文本单行显示溢出时出现省略号二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四.划线文字 text-decoration: line-through;…

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

http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; text-overflow:elli…

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

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

CSS控制文字只显示一行超出部分显示省略号

<p style="width: 120px; height: 50px; border: 1px solid blue; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"> 就是比如有一行文字,很长,表格内一行显示不下. </p> 现在解释一下为什么要这样做: 1.text-overflow: ellipsis; 这里的重点样式是 text-over…

CSS控制文字只显示一行，超出部分显示省略号

<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! </p> 1.text-overflow: ellipsis; 这里的重点样式是 text-overflow: ellipsis; 不过话说te…

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

不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内容超出显示省略号</title> <style> .limitWord{ width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:keep-all…

css 文字展示两行其余的省略号显示

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .comment_inner{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /**…

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

实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"></p> 实现多行文本溢出显示省略号 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; overflow: hidden;…

css让文字显示特定行数，多余的显示省略号

/*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ -webkit-line-clamp: 2; /** 显示的行数 **/ overflow: hidden; /** 隐藏超出的内容 **/ } 1,…