如何设置CSS样式使网页中过长的新闻标题后面以省略号显示

html-css020

如何设置CSS样式使网页中过长的新闻标题后面以省略号显示,第1张

在CSS中，text-overflow:ellipsis可以在文本隐藏时候在文本末尾加入省略号。所以如果Html里是用li写的。

 

li{text-overflow:ellipsisoverflow:hiddenwhite-space:nowrapdisplay:blockword-break:keep-all

本身不链接或者hover功能的元素也是可以实现它内部的元素隐藏

这样子就可以，你可以把li改成你的元素。

分太少 真不值得浪费时间

td,br,input,select{font-family:ms shell dlgfont-size:9ptline-height:150%}

p{font-size:14pxline-height:160%}

A:visited {color:#000000text-decoration:none}

a:hover {color: #0033cctext-decoration:underline}

a:link { color: #000000text-decoration:none}

.white {color:#ffffont-size:14pxfont-weight:boldline-height:150%}

.black {color:#000font-size:14pxfont-weight:boldline-height:150%}

.blue2:visited {color:#C1E0FFtext-decoration:nonefont-size:14px}

.blue2:hover {color: #fffffftext-decoration:underlinefont-size:14px}

.blue2:link { color: #C1E0FFtext-decoration:nonefont-size:14px}

a.awhite{color:fff}

A.awhite:visited {color:ffftext-decoration:none}

a.awhite:hover {color: #ccfffftext-decoration:underline}

a.awhite:link { color: #ffftext-decoration:none}

.link:visited {color:#fffffftext-decoration:nonefont-size:14pxfont-weight:bold}

.link:hover {color: #fffffftext-decoration:underlinefont-size:14pxfont-weight:bold}

.link:link {color: #fffffftext-decoration:nonefont-size:14pxfont-weight:bold}

.curpostitle:visited {color:#000000text-decoration:nonefont-size:14pxfont-weight:bold}

.curpostitle:hover {color: #ff6600text-decoration:underlinefont-size:14pxfont-weight:bold}

.curpostitle:link {color: #000000text-decoration:nonefont-size:14pxfont-weight:bold}

.tulink:visited {color:#fffffftext-decoration:nonefont-size:14px}

.tulink:hover {color: #fffffftext-decoration:underlinefont-size:14px}

.tulink:link { color: #fffffftext-decoration:nonefont-size:14px}

.blank:visited {color:#000000text-decoration:nonefont-weight:bold}

.blank:hover {color: #fffffftext-decoration:nonefont-weight:bold}

.blank:link { color: #000000text-decoration:nonefont-weight:bold}

.news:visited {color:#000000text-decoration:nonefont-size:14px}

.news:hover {color: #666666text-decoration:underlinefont-size:14px}

.news:link { color: #000000text-decoration:nonefont-size:14px}

.blue:visited {color:#003366text-decoration:nonefont-weight:bold}

.blue:hover {color: #CC3300text-decoration:nonefont-weight:bold}

.blue:link { color: #003366text-decoration:nonefont-weight:bold}

.bigblue{color:#013f88font-size:14pxfont-weight:bold}

.wipt {WIDTH: 162px}

.tuwhite{color:#fffffffont-size:12pxfont-weight:bold}

.ArticleTitle{font-size:18pxcolor:#013f88font-weight:bold}

.ArticleContent{font-size:14pxline-height:180%}}

.ListNewClass{background-image:url('../cfs_images/dot.gif')height:18}

.ListColumnClass{background-image:url('../cfs_images/dot.gif')height:18}

.ListRecClass{background-image:url('../cfs_images/dot.gif')height:18}

.TitleClass{font-family:ms shell dlgfont-size:9ptline-height:150%}

.TitleClass2:visited {color:D8EDFBtext-decoration:nonefont-family:ms shell dlgfont-size:9ptline-height:150%}

.TitleClass2:hover {color: #ccfffftext-decoration:underlinefont-family:ms shell dlgfont-size:9ptline-height:150%}

.TitleClass2:link { color: #D8EDFBtext-decoration:nonefont-family:ms shell dlgfont-size:9ptline-height:150%}