Усечение длинных строк с CSS: выполнимый уже?

К сожалению, вы столкнулись с проблемой, которая является как единственным наиболее часто используемым примером для понимания рекурсии, так и почти единственным худшим приложением, к которому можно применить рекурсию.

Очень просто понять рекурсию из Фибоначчи, потому что это действительно тривиальный рекурсивный алгоритм для вас, чтобы объяснить кому-то и понять ... Что означает, что это здорово для программирования рекурсии, верно? К сожалению, нет.

Я извиняюсь, если собираюсь рассказать вам то, что вы уже знаете, но я знаю, что Фибоначчи является одним из первых примеров во вводном программировании, поэтому я предполагаю, что именно отсюда вы пришли.

В программировании есть вещь, называемая стеком. Это буквально называется это, потому что это как стопка бумаг. Когда вы вызываете функцию, она помещает в стек всю информацию, необходимую для вызова функции, передачи аргументов и знания, как вернуться из функции (и некоторых других административных вещей). Когда эта функция рекурсивно вызывает себя, она помещает другой лист поверх стека . Затем эта функция помещает еще один лист. Эти листы не удаляются до тех пор, пока функция не завершится ... Но поскольку одна функция не может завершиться до завершения другой, она просто растет, растет и растет.

И стек только такой большой. Преднамеренно. Чтобы избежать этой проблемы.

Обычно рекурсия не используется для таких глубоких проблем. (Хвост-рекурсивные люди: игнорируйте это; если вы не знаете, что такое хвост-вызов-рекуссия: также игнорируйте это.)

Чтобы исправить это, не сделай это. Общепризнанно, что почти в каждом произвольно-рекурсивном приложении функции цикл for будет работать лучше (и быстрее).

209
задан Community 23 May 2017 в 02:10
поделиться

4 ответа

Обновление: переполнение текста: многоточие теперь поддерживается в Firefox 7 (выпущенном 27 сентября 2011 г.). Ура! Мой первоначальный ответ является исторической записью.

У Джастина Максвелла есть кроссбраузерное решение CSS. Однако у него есть обратная сторона - запрет на выбор текста в Firefox. Ознакомьтесь с его гостевым постом в блоге Мэтта Снайдера для получения полной информации о том, как это работает.

Обратите внимание, что этот метод также предотвращает обновление содержимого узла в JavaScript с помощью свойства innerHTML в Firefox. Обходной путь см. В конце этой публикации.

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml содержимое файла

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

Обновление содержимого узла

Чтобы обновить содержимое узла способом, который работает в Firefox, используйте следующее:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

См. Мэтт Снайдер '

187
ответ дан 23 November 2019 в 04:39
поделиться

Если у вас все в порядке с решением на JavaScript, есть плагин jQuery для этого в кросс-браузерном режиме - см. http://azgtech.wordpress.com/ 2009/07/26 / text-overflow-ellipsis-for-firefox-via-jquery /

19
ответ дан 23 November 2019 в 04:39
поделиться

Для справки, вот ссылка на отслеживание "ошибок" переполнение текста: поддержка многоточия в Firefox . Похоже, Firefox - единственный оставшийся крупный браузер, который не поддерживает собственное решение CSS.

1
ответ дан 23 November 2019 в 04:39
поделиться

Другим решением проблемы может быть следующий набор правил CSS:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

Единственным недостатком вышеприведенного CSS является то, что он добавляет "..." независимо от того, переполняет ли текст контейнер или нет. Тем не менее, если у вас есть случай, когда у вас есть куча элементов и вы уверены, что содержимое будет переполняться, этот набор правил будет более простым.

Мои два цента. Снимаю шляпу перед оригинальной техникой Джастина Максвелла

6
ответ дан 23 November 2019 в 04:39
поделиться
Другие вопросы по тегам:

Похожие вопросы: