想要在布局中显示一段新闻的标题或是内容,特别是内容,东西超多...下面的方法就是通过css来控制文本显示多少的:

首先在html中写上:

<p class="ellipsis"><span>&nbsp;&nbsp;...</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使文本在限制几行之后隐藏的更多相关文章

  1. css 实现文本换行及显示不下隐藏显示省略号

    CSS文本超出2行就隐藏并且显示省略号 转载:https://www.cnblogs.com/wyaocn/p/5830364.html   今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首 ...

  2. 通过CSS使文本框中输入的小写字母变大写字母

    在style.css文件中写 .dataField input{text-transform:uppercase;} .dataField textarea {text-transform:upper ...

  3. MATLAB GUI程序设计中使文本框接收多行输入的方法

    对于文本框来说 Max属性于Min属性数值之差小于等于1时,仅接收单行输入 大于1时,接受多行输入 对于多行情况,set/get到的String应为cell 本系列文章允许转载,转载请保留全文! [说 ...

  4. css使文本保留多个空格

    css属性: white-space: pre-wrap

  5. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  6. css控制文本单行或者多行溢出显示为省略号...

    p:first-child { background-color: pink; width: 150px; line-height: 28px; font-size: 20px; overflow: ...

  7. css 使元素居中

    css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...

  8. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  9. 网页开发中利用CSS以图换字的多中实现方法总汇

    在h1标签中,新增span标签来保存标题内容,然后将其样式设置为display:none <style> h1 { width: 64px; height: 64px; backgroun ...

随机推荐

  1. ASP.NET MVC- 在Area里使用RedirectToAction跳转出错的解决方法

    mvc使用Area分区开发后,存在不同Area之间的跳转,需要为每个区间添加Area规则,如下: 按 Ctrl+C 复制代码 using System.Web.Mvc; namespace web.A ...

  2. linux 的 scp 命令 可以 在 linux 之间复制 文件 和 目录

    转自:http://blog.csdn.net/snlying/article/details/6184102 Linux系统中scp命令的用法. scp就是secure copy的简写,用于在lin ...

  3. UI:自定义键盘的实现

    自定义我的封装键盘,并在试图控制器里对接 (解决多 输入框问题,把输入框存入到可变数组) @implementation AppDelegate - (BOOL)application:(UIAppl ...

  4. ASSER、VERIFY、TRACE详解

    ASSERT()被测试它的参数,如果参数为零,则中断执行并打印一段说明消息.在Release版本的程序中它不起任何作用. ASSERT()使用的时候必须保证参数表达式中不能有函数调用,因此对于任何有函 ...

  5. PL/pgSQL学习笔记之八

    http://www.postgresql.org/docs/9.1/static/plpgsql-declarations.html 另外一种声明 PL/pgSQL 函数的方法是使用 returns ...

  6. c# 轻量级 ORM 框架 之 Model解析 (四)

    关于orm框架设计,还有必要说的或许就是Model解析了,也是重要的一个环节,在实现上还是相对比较简单的. Model解析,主要用到的技术是反射了,即:把类的属性与表的字段做映射. 把自己的设计及实现 ...

  7. cocos2d-x如何新建一个模板项目

    方法一: $ cd cocos2d-x$ ./setup.py$ source FILE_TO_SAVE_SYSTEM_VARIABLE$ cocos new MyGame -p com.your_c ...

  8. Codeforces Gym 100187E E. Two Labyrinths bfs

    E. Two Labyrinths Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100187/prob ...

  9. iOS开发——实战篇Swift篇&UItableView结合网络请求,多线程,数据解析,MVC实战

    UItableView结合网络请求,多线程,数据解析,MVC实战 学了这么久的swift都没有做过什么东西,今天就以自己的一个小小的联系,讲一下,怎么使用swift在实战中应用MVC,并且结合后面的高 ...

  10. android调用系统相机拍照并保存在本地

    import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...