Question

附加的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

Answer 1

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使文本在源代码中布局 - 即没有换行。您必须将文本换行到源代码中的行中。

Answer 2

这篇文章展示了如何在IE和FF中实现这一目标：

http://www.jide.fr/english/emulate-text-overflowellipsis-in-firefox-with-css

文本溢出无效。简单的HTML附加

2 个答案: