想要在布局中显示一段新闻的标题或是内容,特别是内容,东西超多...下面的方法就是通过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. MFC中OnDraw()和OnPaint()的区别[转]

    问题 问题:我在视图画的图象或者文字,当窗口改变后为什么不见了?OnDraw()和OnPaint()两个都是解决上面的问题,有什么不同? OnDraw()和OnPaint()好象兄弟俩,因为它们的工作 ...

  2. Array--Good parts

    js数组没有上届 --如果你用大于或等于当前length的数字作为下标来存储一个元素,那么length会被增大以容纳新元素,不会发生数组越界. 数组也是对象 --可以添加属性.a["name ...

  3. 压力测试工具:tsung

    http://tsung.erlang-projects.org/user_manual/introduction.html#what-is-tsung

  4. JavaScript 跨域:谈谈跨域之 JSONP

    在 Web 开发中,后台开发人员应该会通常遇到这个问题:跨域,而使用 JSONP 就是其中解决办法之一,当然,还有其它解决方法,比如:window.name.window.postMessage.CO ...

  5. MySQL 多会话之间更新数据的小实例

    1:创建一个实验表 mysql> use test; mysql> CREATE TABLE t -> (id int(11) NOT NULL DEFAULT 0, -> n ...

  6. hdu 5273 Dylans loves sequence 逆序数简单递推

    Dylans loves sequence Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem ...

  7. 小票打印机指令集封装(支持EPSON指令)

    最近写了一些关于小票打印机的程序,不难,但是记录下来,作为足迹吧. 现在市场上的小票机基本都支持EPSON指令.指令集文档 对指令集进行了自己的封装,方便以后调用: package aheiziUti ...

  8. WCF入门教程(二)从零做起

    通过最基本的操作看到最简单的WCF如何实现的.这是VS的SDK默认创建的样本 1.创建WCF服务库 2.看其生成结构 1)IService1.cs(协议) 定义了协议,具体什么操作,操作的参数和返回值 ...

  9. PHP版根据经纬度和半径计算出经纬度的范围

    百度地图提供了范围搜索的功能,但是它使用的是百度自己的数据,但是有时候我们需要使用自己的数据,显示在地图上.比如给定两个参数:指定位置(某一处的经纬度lnglat)和搜索半径(r),搜索指定范围内的数 ...

  10. JavaScript随机数

    function random(start,end){ var total=start+end; return Manth.floor(Manth.random()+total-start); }