Съкращаване на дълги низове с CSS: възможно ли е вече?

Актуализация: text-overflow: ellipsis вече се поддържа от Firefox 7 (издаден на 27 септември 2011 г.). Ура! Първоначалният ми отговор следва като исторически запис.

Джъстин Максуел има CSS решение за различни браузъри. Той обаче идва с недостатъка, че не позволява текстът да бъде избран във Firefox. Разгледайте неговата публикация като гост в блога на Matt Snider за пълни подробности относно как работи това.

Обърнете внимание, че тази техника също предотвратява актуализирането на съдържанието на възела в 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);
    }
};

Вижте публикацията на Matt Snider за обяснение как работи това.

webview.setWebViewClient(new MyWebViewClient ());

private class MyWebViewClient extends WebViewClient {
@Override
public void onReceivedHttpAuthRequest(WebView view,
        HttpAuthHandler handler, String host, String realm) {

    handler.proceed("[email protected]", "mypassword");

}
}

#include <algorithm>
...

vector<char> m_vcopy;
m_vcopy.reserve(m_vbuffer.size());
copy(m_vbuffer.begin(), m_vbuffer.end(), m_vcopy.begin());

Март 2014 г.: Съкращаване на дълги низове с CSS: нов отговор с акцент върху поддръжката на браузър

Демо на http://jsbin.com/leyukama/1/ (използвам jsbin, защото поддържа стари версия на IE).

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

CSS свойството -ms-text-overflow не е необходимо: то е синоним на CSS свойството text-overflow, но версии на IE от 6 до 11 вече поддържат CSS свойството text-overflow.

Успешно тестван (на Browserstack.com) на Windows OS, за уеб браузъри:

• IE6 to IE11
• Opera 10.6, Opera 11.1, Opera 15.0, Opera 20.0
• Chrome 14, Chrome 20, Chrome 25
• Safari 4.0, Safari 5.0, Safari 5.1
• Firefox 7.0, Firefox 15

Firefox: както беше посочено от Саймън Лишке (в друг отговор), Firefox поддържа само свойството CSS за текстово препълване от Firefox 7 нататък (издаден на 27 септември 2011 г.).

Проверих два пъти това поведение във Firefox 3.0 и Firefox 6.0 (препълването на текст не се поддържа).

Ще са необходими някои допълнителни тестове на уеб браузъри на Mac OS.

Забележка: може да искате да покажете подсказка при задържане на мишката, когато се приложи многоточие, това може да стане чрез javascript, вижте тези въпроси: HTML text-overflow откриване на многоточие и HTML - как мога да покажа подсказка САМО когато многоточието е активирано

ресурси:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

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

Добре, Firefox 7 внедри text-overflow: ellipsis, както и text-overflow: "string". Окончателното издание е планирано за 2011-09-27.

Друго решение на проблема може да бъде следният набор от CSS правила:

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

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

Единственият недостатък на горния CSS е, че той ще добави "..." независимо дали текстът препълва контейнера или не. И все пак, ако имате случай, в който имате куп елементи и сте сигурни, че съдържанието ще препълни, това ще бъде по-опростен набор от правила.

Моите два цента. Шапки долу за оригиналната техника на Джъстин Максуел