Text-overflow not working. Simple HTML attached_问答_开发者

Text-overflow not working. Simple HTML attached

开发者 https://www.devze.com 2023-04-13 01:59 出处：网络

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.

相关专题：css

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.