想要在布局中显示一段新闻的标题或是内容,特别是内容,东西超多...下面的方法就是通过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. xiaocms 关于搜索功能 添加搜索字段

    自己折磨了好几天 就是没研究个出像样的的东西 看了一下 core/controller/index.php searchAction()方法 但是不知从何下手.查了sql语句,还是没实现 请教了一位自 ...

  2. Linux之sed,awk(流编辑器)

    sed:  s----substitute(替换) 1. 文本替换(使用-i选项,可以将结果应用于原文件) many people在进行替换之后,借助重定向来保存文件(未使用-i选项): $ sed  ...

  3. Jmeter_初步认识随笔

    1. 简介 Apache JMeter是100%纯java桌面应用程序,被设计用来测试客户端/服务器结构的软件(例如web应用程序).它可以用来测试包括基于静态和动态资源程序的性能,例如静态文件,Ja ...

  4. Mac OS X取消Apache(httpd)开机启动

    安装MAMP后,启动服务时提示Apache启动失败,80端口被占用.查看进程发现存在几个httpd. OS X自带Apache,可是默认是没有启动的.我也没有开启Web共享,怎么就开机启动了呢? 不知 ...

  5. props 和 state的区别

    作者:孙志勇 微博 日期:2016年11月29日 一.时效性 所有信息都具有时效性.文章的价值,往往跟时间有很大关联.特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时 ...

  6. SVM-支持向量机算法概述

    (一)SVM的背景简单介绍 支持向量机(Support Vector Machine)是Cortes和Vapnik于1995年首先提出的,它在解决小样本.非线性及高维模式识别中表现出很多特有的优势,并 ...

  7. 《TCP/IP具体解释卷2:实现》笔记--IP多播

    D类IP地址(224.0.0.0到239.255.255.255)不识别互联网内的单个接口,但识别接口组,被称为多播组. 单个网络上的组成员利用IGMP协议在系统之间通信. 多播路由器用多播选录协议. ...

  8. System.setProperty()

    /*  * 设置指定键对值的系统属性  * setProperty (String prop, String value);  *  * 參数:  * prop - 系统属性的名称.  * value ...

  9. sql server常用知识点

    --删除表 use [20130823_Recource] go drop table my_table1,my_table2,My_table3 --创建表 use [20130823_Recour ...

  10. IOS实用功能之截图(来自相册和拍照)

    // //  ViewController.m //  MyImagePicker1.0 // //  Created by Mac on 14-7-14. //  Copyright (c) 201 ...