利用css使文本在限制几行之后隐藏
想要在布局中显示一段新闻的标题或是内容,特别是内容,东西超多...下面的方法就是通过css来控制文本显示多少的:
首先在html中写上:
<p class="ellipsis"><span> ...</span> 超多内容..... <p>
之后开始设置css样式:
.ellipsis {
height: 3em;
line-height: 1.5em;
width: 100%;
overflow: hidden;
position: relative;
}
.ellipsis:after {
background-color: #F2F2F2;
color: #F2F2F2;
display: inline;
position: relative;
z-index: 1;
}
.ellipsis span {
position: absolute;
bottom: 0px;
right: 0px;
}
简简单单这样就可以实现啦
/*改变placeholder默认颜色*/
input::-webkit-input-placeholder{
color: #ffffff;
font-size: 14px;
}
input:-moz-placeholder{
color: #ffffff;
font-size: 14px;
}
利用css使文本在限制几行之后隐藏的更多相关文章
- css 实现文本换行及显示不下隐藏显示省略号
CSS文本超出2行就隐藏并且显示省略号 转载:https://www.cnblogs.com/wyaocn/p/5830364.html 今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首 ...
- 通过CSS使文本框中输入的小写字母变大写字母
在style.css文件中写 .dataField input{text-transform:uppercase;} .dataField textarea {text-transform:upper ...
- MATLAB GUI程序设计中使文本框接收多行输入的方法
对于文本框来说 Max属性于Min属性数值之差小于等于1时,仅接收单行输入 大于1时,接受多行输入 对于多行情况,set/get到的String应为cell 本系列文章允许转载,转载请保留全文! [说 ...
- css使文本保留多个空格
css属性: white-space: pre-wrap
- 利用CSS使footer固定在页面底部
1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...
- css控制文本单行或者多行溢出显示为省略号...
p:first-child { background-color: pink; width: 150px; line-height: 28px; font-size: 20px; overflow: ...
- css 使元素居中
css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- 网页开发中利用CSS以图换字的多中实现方法总汇
在h1标签中,新增span标签来保存标题内容,然后将其样式设置为display:none <style> h1 { width: 64px; height: 64px; backgroun ...
随机推荐
- hdoj 5326 Work
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5326 #include<stdio.h> #include<cstring> ...
- java_web用户的自动登录模块的实现
javaBean的代码 package bean; import java.io.Serializable; public class Admin implements Serializable{ / ...
- Could not load file or assembly 'MagickNet.dll'
1 确定项目中bin目录下存在该DLL文件 2 安装 VC++发布组件_缩略图用_x86(1).exe
- 通过SimpleAction显示一个listview
private void simpleAction1_Execute(object sender, SimpleActionExecuteEventArgs e) { IObjectSpace os ...
- xmlBean学习一
在文档中看到了xmlBean的出现,因为项目使用JMS,模块之间通过xml文件传递数据,就学一下xmlBean,java中还提供了DOM,SAX来解析xm,但也是比较麻烦的:而xmlbean则将xml ...
- 无法将类型为 excel.applicationclass 的 com 强制转换为接口类型 的解决方法。
今天碰到客户的电脑在导出EXCEL的时候提示,无法将类型为 excel.applicationclass 的 com 强制转换为接口类型 excel._application 的问题 最后用下面的方法 ...
- C#将html导出到word(基于wps)
由于客户需要,我们需要实现将网页导出到word中的功能,在此过程中,尝试使用过openoffice.itext.wordapi等各种方法,都不尽如人意.openoffice导出的问题图片信息在word ...
- ORA-01722: invalid number
---问题 select owner,index_name,DEGREE from DBA_INDEXES where DEGREE>1 ...
- 微信公共服务平台开发(.Net 的实现)11-------客服消息(定项消息推送 重要的OPENID)
这次我们来一起研究一下“客服消息”,首先明确一下“客服消息”的概念.这不同于之前的“被动响应消息”,也就是说并不是之前“你一言我一语的即时响应”,可能在某种情况下你需要给不同的人主动发送消息,例如你的 ...
- 将 Android 应用移植到 BlackBerry PlayBook 上
美国西部时间18号早上,也就是我们的19号凌晨,BlackBerry DevCon活动隆重举行,PlayBook 2.0开发测试版随之发布.PlayBook 2.0的一个重要功能就是支持Android ...