想要在布局中显示一段新闻的标题或是内容,特别是内容,东西超多...下面的方法就是通过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. php中定义类

    <?php class Person{ //定义了一个Person类 public $name; //定义属性name public $age; //定义属性age function __con ...

  2. BeanFactory和ApplicationContext的作用和区别

    BeanFactory和ApplicationContext的作用和区别 作用: 1. BeanFactory负责读取bean配置文档,管理bean的加载,实例化,维护bean之间的依赖关系,负责be ...

  3. DISCUZ X2更换域名注意事项

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  4. Windows性能计数器2

    判断瓶颈 Ø 判断应用程序的问题 如果系统由于应用程序代码效率低下或者系统结构设计有缺陷而导致大量的上下文切换(context switches/sec显示的上下文切换次数太高)那么就会占用大量的系统 ...

  5. 【转】REST on Rails指南

    REST on Rails指南1:理解资源 这是来自http://www.softiesonrails.com的REST简明指南. PART I 在理解REST on Rails之前,有必要先思考一下 ...

  6. MySQL 备份恢复

    1:备份常用工具: mysqldump, xtrabackup mysqldump: 原生数据导出工具,以sql的形式导出保存 xtrabackup: percona团队提供的备份工具,基于文件系统的 ...

  7. sscanf和sprintf是scanf和printf家族用法 (转)

    sscanf和sprintf是scanf和printf家族用法 sscanf和sprintf是scanf和printf家族的一对成员,用于处理和分析字符串非常强大得两个函数头文件 stdio.h原型i ...

  8. linux C 执行多个文件

  9. $parse/$eval和$observe/$watch如何区分

    大家在看angular的时候,有时候偶尔会看到$parse,$eval和$observe,$watch这两对语法,随着深入使用angular,就不可避免使用到它.文章从内部运行机制跟实际需求的角度来解 ...

  10. java 图的邻接矩阵

    有向图 在有向图中,结点对<x ,y>是有序的,结点对<x,y>称为从结点x到结点y的一条有向边,因此,<x,y>与<y,x>是两条不同的边.有向图中的 ...