Переполнение текста не работает.Простой HTML прилагается - PullRequest
Новая
       0

Переполнение текста не работает.Простой HTML прилагается

1 голос
/ 14 октября 2011

Прикрепленный 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

Ответы [ 2 ]

2 голосов
/ 22 марта 2012

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 голос
/ 14 октября 2011

Вот статья, которая показывает, как этого добиться в IE и FF:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...