CSS - переполнение текста: исправление многоточия

Question

CSS - переполнение текста: исправление многоточия

0

Я использую text-overflow: многоточие, чтобы сделать максимальное количество строк в моей статье с контейнером. Он работает нормально, но ограничивает запуск после 1 строки, и мне нужно установить его больше. (например, 3-4) проблема заключается в том, как бы я ни старался, она перемещала все в контейнере с моей статьей или не делала никаких изменений.

Я новичок в CSS, поэтому я часто делаю что-то неправильно, могу ли помочь мне с этим?

DEMO: Fiddle LIVE WEBSITE

Часть CSS с эллипсисом (полный CSS/HTML можно найти на демонстрационных примерах выше):

#article-container p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 168px;
}

#article-container p.more {
    overflow: hidden;
    padding: 0;
    white-space: normal;
    width: auto;
}

Итак, ребята здесь, кто-нибудь, кто может помочь мне установить, чтобы он ограничивал больше строк не только одним?

Спасибо, что прочитали этот пост

user3009924 28 апр. 2014, в 16:54

Источник

0

cssmojo.com/line-clamp_for_non_webkit-based_browsers
CBroe 28 апр. 2014, в 14:33
0

Есть ли шанс, что вы можете дать мне работать скрипку, потому что я пытаюсь это, и он просто удаляет мой p.more :(
user3009924 28 апр. 2014, в 14:37
1

Нет. Вы можете увидеть, как это работает в примерах на странице. Понимать это и затем переносить это в вашу среду - ваша работа…
CBroe 28 апр. 2014, в 14:41

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

Ещё вопросы

Есть ли шанс, что вы можете дать мне работать скрипку, потому что я пытаюсь это, и он просто удаляет мой p.more :(
Нет. Вы можете увидеть, как это работает в примерах на странице. Понимать это и затем переносить это в вашу среду - ваша работа…

Bob Brinks · Answer 1 · 2014-04-28T12-54-00.000Z

В Elipse в CSS только 1 строка. Есть несколько библиотек javascript, которые помогут вам выполнить то, что вы хотите. Например, http://dotdotdot.frebsite.nl/.

Мне нужно исправить это без JS, просто HTML + CSS
Возможно, вы можете попробовать использовать max-height и max-width и установить overflow:hidden . Но это, вероятно, покажет половину буквы в некоторых браузерах в зависимости от содержимого.

Vikestart · Answer 2 · 2014-04-28T13-16-00.000Z

Вы не можете сделать больше, чем 1 строку с CSS (по крайней мере, не таким образом, который совместим с большинством браузеров), но вы можете обрезать его с помощью PHP, если вы не хотите использовать Javascript.

<?php
function Truncate($string, $length=50, $stopanywhere=false) {
    if (strlen($string) > $length) {
        //limit hit!
        $string = substr($string,0,($length -3));
        if ($stopanywhere) {
            //cut off anywhere
            $string .= '...';
        } else{
            //cut off after word
            $string = substr($string,0,strrpos($string,' ')).'...';
        }
    }
    return $string;
}
?>

Определите строку $ с текстом, текст, который вы хотите ограничить.

Да, приятель, у меня нет проблем, чтобы ограничить его с помощью PHP, проблема в том, что это код для моего друга, и он хочет ограничить его с помощью CSS / HTML, нет ли способа ограничить его шириной / высотой или чем-то еще?
В настоящее время нет способа сделать это с помощью чистого CSS и добавить многоточие таким образом, чтобы это было совместимо со всеми современными браузерами. По крайней мере, без использования CSS-хаков. Попробуйте ссылку, которую кто-то разместил в комментарии к вашему вопросу. Не могу гарантировать, что это даст надежный результат.