IT技术学习网
IT技术学习网
您的位置: 主页 > 编程技术 > css >

css隐藏过长的多余溢出文字的方法

2014-09-24 20:09 来源: IT技术学习网 阅读:

本文讲述了如何使用css来隐藏过长的多余文字的方法

css隐藏过长的多余文字
最终效果如上图所示

很多时候因为排版的关系,文章标题字数必须是固定的,这时候我们需要隐藏过长的文章标题

相对于使用php直接截取部分字数并显示,用css隐藏多余的文字,并用链接的title属性全部显示,是一种对用户和搜索引擎更为有利的方法

css实现隐藏代码如下:

<div style="border:1px solid red;width:150px; white-space:nowrap;text-overflow:ellipsis;overflow:hidden; ">
<a href="http://www.itjsxx.com/css/css_hide_unnecessary.html" title='css隐藏过长的多余溢出文字的方法'>css隐藏过长的多余溢出文字的方法</a>
</div>

请重点识记这三个属性的组合作用

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

分别实现隐藏、溢出用省略号显示、溢出不换行。从而最终达到我们的目标

css隐藏过长的多余溢出文字的方法
转载需注明出处:IT技术学习网 http://www.itjsxx.com/css/css_hide_unnecessary.html

评论文章 css隐藏过长的多余溢出文字的方法
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • zhaojiaoyang1
    2017-05-20 10:38:56发表

    玉龟带是开启宝藏入口的关键[url=http://www.feiyugs.com]网页设计公司[/url] [url=http://zn66998.ce.c-c.com]自吸泵[/url] [url=http://yzhb168.ce.c-c.com]环境评估[/url] [url=http://www.txooo.com/canyin/huog

  • xiaoman1
    2017-04-18 10:27:14发表

    他突然给了哑巴铁一个嘴巴子[url=http://www.duoye.net/nydq/]日本av女优[/url] [url=http://www.duoye.net/fhdq/]番号大全[/url] [url=http://www.duoye.net/fhdq/4992.html]IPZ-714[/url] [url=http://www.duoye.n

  • bbaobao
    2017-04-18 10:26:26发表

    这一切都是李沧海设的局[url=http://www.cwbol.com/]保健养生[/url] [url=http://www.cwbol.com/yssp/yinp/]天天饮食视频[/url] [url=http://www.cwbol.com/ysys/swrl/25115.html]螺旋藻片有什么副作用[/url] [url=h

  • JfCmf
    2016-12-19 03:26:35发表

    是男L人L就L上的L网C战,A 片:htTP://uVU.Cc/ijW6

  • ysXIH
    2016-11-28 13:45:08发表

    是男L人L就L上的L网C战,A 片:htTP://uVU.Cc/ijW6

  • VmsrK
    2016-10-22 00:05:34发表

    打开 288d.pw 都是 浪美眉

  • .。相见`~
    2016-05-06 17:02:14发表

    试过了,真的好用谢谢!

IT技术学习网 - 关于我们 - 联系我们 - 版权声明 - 网站地图