Text-overflow not working. Simple HTML attached
The attached HTML is for a Yahoo News Style panel I am trying to make. I want the content at the bottom to show "ellipsis" when it overflows.
As of now the browser is able to detect the overflow and crop it since I have overflow:hidden set but it doesnt append the ellipsis in the end.
Any ideas? You just need to save the HTML in a HTML file to check it out. Thanks a lot
<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 c开发者_如何学编程lass = "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
text-overflow only comes into effect when combined with white-space: nowrap.
See http://www.quirksmode.org/css/textoverflow.html
So your CSS would be:
.slider-content
{
font: verdana;
margin:0px 5px;
display:block;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
Note that nowrap makes the text lay out as it is in the source code - i.e., no line-wrapping. You have to wrap the text into lines in the source code.
加载中,请稍侯......
精彩评论