新闻列表中,常用的文字超出后显示省略号...
新闻列表中,常用的文字超出后显示省略号..
<head></head> <body> <div class="nwes"> <ul> <li><a href="">这里是新闻标题,今天晚上会下雨</a></li> <li><a href="">这里是新闻标题,今天晚上会下雨</a></li> <li><a href="">这里是新闻标题,今天晚上会下雨</a></li> <li><a href="">这里是新闻标题,今天晚上会下雨</a></li> <li><a href="">这里是新闻标题,今天晚上会下雨</a></li> <li><a href="">这里是新闻标题,今天晚上会下雨</a></li> <li><a href="">这里是新闻标题,今天晚上会下雨</a></li> <li><a href="">这里是新闻标题,今天晚上会下雨</a></li> <li><a href="">这里是新闻标题,今天晚上会下雨</a></li> <li><a href="">这里是新闻标题,今天晚上会下雨</a></li> </ul> </div> </body><title>文本超出后显示省略号...</title> <style type="text/css"> ul li { list-style-type: none; } a { color: #000000; text-decoration: none; } a:hover { color: #999999; } li { width: 200px; white-space: nowrap; /*强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。 */ text-overflow: ellipsis; -o-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; overflow: hidden; } /* firefox only wtf is? pls let me know*/ li:not(li) { clear: both; } li:not(li) a { max-width: 175px; float: left; } li:not(li):after { content: "..."; float: left; width: 25px; padding-left: 5px; color: #df3a0e; } </style>
作者:一知半解
自勉:竞技体育,成绩是练出来的,冠军是撞出来的,作为一个拉力车手,冲出赛道没有任何缓冲区域,旁边可能是墙,是树,是水库,是悬崖,就看谁能在逼近极限的同时,犯更少的错误,你过的每一个弯,都没有机会再来一次,你犯的每一个错,都会断送整场比赛,甚至你的职业生涯,我们所爱的事业和别的运动不一样,你需要钱,需要一个好的技师团队,需要一台好车,需要你的专业和冷静,需要你在全世界最危险的地方,开着这台车全速推进,什么尊严,面子,荣誉,廉耻,你都顾不上,怎么战胜对手,那就是找到最晚的刹车点,找到轮胎的摩擦力极限,找到你自我能力的边界,然后把你眼前的每一个弯都过好,这不是驾驶的技术,这是驾驶的艺术,巴音布鲁克,1462道弯,109公里,耍小聪明,赢得了一百米,赢不了100公里,你问我绝招,绝招只要两个字,奉献,就把你的全部奉献给你所热爱的一切。摘自《飞驰人生》