附加的HTML适用于我想要制作的Yahoo News Style面板。我希望底部的内容在溢出时显示“省略号”。
截至目前,浏览器能够检测到溢出并裁剪它,因为我有溢出:隐藏集但是它最后没有附加省略号。
有什么想法吗?您只需将HTML保存在HTML文件中即可将其检出。非常感谢
<style type="text/css">
.slider-nav
{
position:absolute;
height:40px;
width:40px;
top:40%;
}
.slider-nav-left
{
background-position: 0px -797px;
right:2%;
}
.slider-nav-right
{
background-position:0px -858px;
left:2%;
}
.slider-main
{
margin:0% 80px;
position:relative;
height:80%;
border-left:1px dotted #9f9e9e;
border-right:1px dotted #9f9e9e;
top:10%;
}
ol
{
width:100%;
height:100%;
position:relative;
margin:0;
padding:0;
}
li
{
width: 100%;
height:100%;
position:relative;
display:inline;
float:left;
}
a
{
width:25%;
height:100%;
position:relative;
display: inline;
float:left;
overflow: hidden;
text-overflow: ellipsis;
}
.slider-title
{
height:55px;
margin:0px 5px;
display:block;
font-size: 12px;
font: verdana;
}
.slider-content
{
font: verdana;
margin:0px 5px;
display:block;
font-size: 16px;
text-overflow: ellipsis;
}
</style>
<body>
<div style = "width:800px; position:relative; height:210px; border: 1px solid black">
<img class = "slider-nav slider-nav-left" />
<div class = "slider-main">
<ol>
<li>
<a>
<span class = "slider-title">
Oil plunges below $84 in Asia after S&P lowers Us Debt Ratins
</span>
<span class = "slider-content">
<p>Reuters</p>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
</span>
</a>
<a>
<span class = "slider-title">
Stable Prospects for Oil and Gas Companies Reflect the Economy and High Oil Prices
</span>
<span class = "slider-content">
<p>RIT New</p>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
</span>
</a>
<a>
<span class = "slider-title">
Stable Prospects for Oil and Gas Companies Reflect the Economy and High Oil Prices
</span>
<span class = "slider-content">
<p>RIT New</p>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
</span>
</a>
<a>
<span class = "slider-title">
Stable Prospects for Oil and Gas Companies Reflect the Economy and High Oil Prices
</span>
<span class = "slider-content">
<p>RIT New</p>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
</span>
</a>
</li>
</ol>
</div>
<img class = "slider-nav slider-nav-right" />
</div>
</body>
Thanks
答案 0 :(得分:2)
text-overflow
仅在与white-space: nowrap
结合使用时生效。
请参阅http://www.quirksmode.org/css/textoverflow.html
所以你的CSS将是:
.slider-content
{
font: verdana;
margin:0px 5px;
display:block;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
请注意nowrap
使文本在源代码中布局 - 即没有换行。您必须将文本换行到源代码中的行中。
答案 1 :(得分:1)
这篇文章展示了如何在IE和FF中实现这一目标:
http://www.jide.fr/english/emulate-text-overflowellipsis-in-firefox-with-css