文本溢出不工作。简单HTML附加_Html_Css

文本溢出不工作。简单HTML附加

html css

文本溢出不工作。简单HTML附加,html,css,Html,Css,附加的HTML是一个雅虎新闻风格的面板，我试图使。我希望底部的内容在溢出时显示“省略号” 到目前为止，浏览器能够检测溢出并对其进行裁剪，因为我已经设置了overflow:hidden集，但它不会在最后附加省略号有什么想法吗？您只需将HTML保存在HTML文件中即可检出。非常感谢 <style type="text/css"> .slider-nav { position:absolute; height:40px; width:40px; top:

附加的HTML是一个雅虎新闻风格的面板，我试图使。我希望底部的内容在溢出时显示“省略号”

到目前为止，浏览器能够检测溢出并对其进行裁剪，因为我已经设置了overflow:hidden集，但它不会在最后附加省略号

有什么想法吗？您只需将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


.滑块导航
{
位置：绝对位置；
高度：40px；
宽度：40px；
最高：40%；
}    
.左导航滑块
{
背景位置：0px-797px；
右：2%；
}
.右滑块导航
{
背景位置：0px-858px；
左：2%；
}
.主滑块
{
利润率：0%80px；
位置：相对位置；
身高：80%；
左边框：1px点#9f9e9e；
右边框：1px点#9f9e9e；
排名前10%；
}
ol
{
宽度：100%；
身高：100%；
位置：相对位置；
保证金：0；
填充：0；
}
锂
{
宽度：100%；
身高：100%；
位置：相对位置；
显示：内联；
浮动：左；
}
A.
{
宽度：25%；
身高：100%；
位置：相对位置；
显示：内联；
浮动：左；
溢出：隐藏；
文本溢出：省略号；
}
.滑块标题
{
高度：55px；
利润率：0px 5px；
显示：块；
字体大小：12px；
字体：verdana；
}
.滑块内容
{
字体：verdana；
利润率：0px 5px；
显示：块；
字体大小：16px；
文本溢出：省略号；
}

标准普尔下调美国债务比率后，亚洲石油价格跌至84美元以下
路透社
诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类
石油和天然气公司的稳定前景反映了经济和高油价
瑞特新酒店
诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类
石油和天然气公司的稳定前景反映了经济和高油价
瑞特新酒店
诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类
石油和天然气公司的稳定前景反映了经济和高油价
瑞特新酒店
诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类

谢谢

文本溢出

仅在与

空白：nowrap

组合时生效

看

所以你的CSS应该是：

.slider-content
{
    font: verdana;
    margin:0px 5px;
    display:block;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

请注意，

nowrap

使文本的布局与源代码中的布局相同，即没有换行。您必须在源代码中将文本换行