Вопросы Теги

Вставьте многоточие (& hellip;) в тег HTML, если содержимое слишком широкое

Просто для удовольствия, другие решения с двумя ключами. Эта таблица стилей: 

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:key name="kWorkTimeByName-TaskID" match="workTime" 
              use="concat(../name,'++',@taskID)"/>
    <xsl:key name="kWorkTimeByName-Date-TaskID" match="workTime" 
              use="concat(../name,'++',../date,'++',@taskID)"/>
    <xsl:template match="/">
        <xsl:variable name="vAllWorkTime" select="*/*/workTime"/>
        <result>
            <xsl:for-each select="$vAllWorkTime
                        [count(.|key('kWorkTimeByName-TaskID',
                                         concat(../name,'++',@taskID))[1])=1]">
                <xsl:sort select="../name"/>
                <xsl:sort select="@taskID" data-type="number"/>
                <Person>
                    <xsl:copy-of select="../name"/>
                    <taskID>
                        <xsl:value-of select="@taskID"/>
                    </taskID>
                    <xsl:for-each select="$vAllWorkTime
                          [count(.|key('kWorkTimeByName-Date-TaskID',
                               concat(current()/../name,'++',
                                   ../date,'++',current()/@taskID))[1])=1]">
                        <xsl:sort select="../date"/>
                        <xsl:copy>
                            <xsl:copy-of select="../date"/>
                            <time>
                                <xsl:value-of select="."/>
                            </time>
                        </xsl:copy>
                    </xsl:for-each>
                </Person>
            </xsl:for-each>
        </result>
    </xsl:template>
</xsl:stylesheet>

Выход: 

<result>
    <Person>
        <name>John</name>
        <taskID>1</taskID>
        <workTime>
            <date>June12</date>
            <time>34</time>
        </workTime>
        <workTime>
            <date>June13</date>
            <time>21</time>
        </workTime>
    </Person>
    <Person>
        <name>John</name>
        <taskID>2</taskID>
        <workTime>
            <date>June12</date>
            <time>12</time>
        </workTime>
        <workTime>
            <date>June13</date>
            <time>11</time>
        </workTime>
    </Person>
</result>
144
задан alex 12 April 2011 в 06:05
поделиться

8 ответов

У меня есть решение, работающее в FF3, Safari и IE6 + с однострочным и многострочным текстом 

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

.ellipsis.multiline {
    white-space: normal;
}

<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>

jquery.ellipsis.js 

(function($) {
    $.fn.ellipsis = function()
    {
        return this.each(function()
        {
            var el = $(this);

            if(el.css("overflow") == "hidden")
            {
                var text = el.html();
                var multiline = el.hasClass('multiline');
                var t = $(this.cloneNode(true))
                    .hide()
                    .css('position', 'absolute')
                    .css('overflow', 'visible')
                    .width(multiline ? el.width() : 'auto')
                    .height(multiline ? 'auto' : el.height())
                    ;

                el.after(t);

                function height() { return t.height() > el.height(); };
                function width() { return t.width() > el.width(); };

                var func = multiline ? height : width;

                while (text.length > 0 && func())
                {
                    text = text.substr(0, text.length - 1);
                    t.html(text + "...");
                }

                el.html(t.html());
                t.remove();
            }
        });
    };
})(jQuery);
118
ответ дан 23 November 2019 в 22:51
поделиться

Ну, одно простое решение, которое не вполне добавляет "...", но действительно предотвращает < h2> от вторжения в две строки должен был бы добавить этот бит CSS: 

h2 {
    height:some_height_in_px; /* this is the height of the line */
    overflow:hidden; /* so that the second (or third, fourth, etc.)
                        line is not visible */
}

я уделил ему еще некоторое внимание, и я предложил это решение, необходимо перенести текстовое содержание тега h2 с другим тегом (например, промежуток) (или альтернативно перенести h2s с чем-то, что имеет данную высоту), и затем можно использовать этот вид JavaScript для отфильтровывания ненужных слов: 

var elems = document.getElementById('conainter_of_h2s').
                     getElementsByTagName('h2');

    for ( var i = 0, l = elems.length; i < l; i++) {
        var span = elems.item(i).getElementsByTagName('span')[0];
        if ( span.offsetHeight > elems.item(i).offsetHeight ) {
            var text_arr = span.innerHTML.split(' ');
            for ( var j = text_arr.length - 1; j>0 ; j--) {
                delete text_arr[j];
                span.innerHTML = text_arr.join(' ') + '...';
                if ( span.offsetHeight <= 
                                        elems.item(i).offsetHeight ){
                    break;
                }
            }
        }
    }
3
ответ дан John Saunders 12 April 2011 в 06:05
поделиться

Существует на самом деле довольно простой путь к , делают это в CSS , использующем то, что IE расширяет это с помощью нестандартов и поддержек FF :after

, Вы можете также делать это в JS, если Вы желаете путем осмотра scrollWidth цели, и сравнивая его с он - родительская ширина, но по моему скромному мнению это менее устойчиво.

Редактирование: это, по-видимому, более разрабатывается, чем я думал. Поддержка CSS3 может скоро существовать, и некоторые несовершенные расширения доступны для Вас для попытки.

, Что последний является хорошим чтением.

5
ответ дан annakata 12 April 2011 в 06:05
поделиться
  • 1
    I' ve просто работа с этим, поэтому только для любого смотрящего на это в будущем, Запросе. UserLanguages является по существу разделенной версией запятой Запроса. ServerVariables [" HTTP_ACCEPT_LANGUAGE"]. Первый объект в массиве просто будет кодом страны (например, ' en-GB') и последующие объекты будут обычно содержать ' weighting' (например, ' en-США; q=0.8'), например, мой - " en-ГБ, en-США; q=0.8, en; q=0.6" таким образом, Вы также, возможно, должны были бы разделить каждый объект снова для нахождения фактического кода и взвешивания. – Ian Routledge 18 December 2012 в 22:12

Я сделал что-то подобное для клиента недавно. Вот версия того, что я сделал для них (пример, протестированный во всех последних версиях браузера на Победе Vista). Не прекрасный все вокруг платы, но мог быть настроен довольно легко.

Демонстрация: http://enobrev.info/ellipsis/

Код: 

<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script>            
            google.load("jquery", "1.2.6");
            google.setOnLoadCallback(function() {
                $('.longtext').each(function() {
                    if ($(this).attr('scrollWidth') > $(this).width()) {
                        $more = $('<b class="more">&hellip;</b>');

                        // add it to the dom first, so it will have dimensions
                        $(this).append($more);

                        // now set the position
                        $more.css({
                            top: '-' + $(this).height() + 'px',
                            left: ($(this).attr('offsetWidth') - $more.attr('offsetWidth')) + 'px'
                        });
                    }
                });
            });
        </script>

        <style>
            .longtext {
                height: 20px;
                width: 300px;
                overflow: hidden;
                white-space: nowrap;
                border: 1px solid #f00;
            }

            .more {
                z-index: 10;
                position: relative;
                display: block;
                background-color: #fff;
                width: 18px;
                padding: 0 2px;
            }
        </style>
    </head>
    <body>
        <p class="longtext">This is some really long text.  This is some really long text.  This is some really long text.  This is some really long text.</p>
    </body>
</html>
3
ответ дан enobrev 12 April 2011 в 06:05
поделиться
  • 1
    Кавычка: Typically these consist of a two-character codes for the language, a hyphen, and a two-character code for the culture, such as "en-us" for U.S. English and "fr-ca" for Canadian French.. Так it' s string[] массив, содержащий значения как те. – Sergey Kudriavtsev 24 February 2012 в 00:44

Следующее единственное решение CSS для усечения текста в одной строке работает со всеми браузерами, перечисленными на http://www.caniuse.com на момент написания, за исключением Firefox 6.0. Обратите внимание, что JavaScript совершенно не нужен, если вам не нужна поддержка переноса многострочного текста или более ранних версий Firefox. 

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

Если вам нужна поддержка более ранних версий Firefox, ознакомьтесь с моим ответом на этот другой вопрос .

179
ответ дан 23 November 2019 в 22:51
поделиться

Существует простое решение jQuery от Девона Говетта :

https: // gist .github.com / digulla / 5796047

Чтобы использовать, просто вызовите ellipsis () для объекта jQuery. Например:

$ ("span"). Ellipsis ();

2
ответ дан 23 November 2019 в 22:51
поделиться

Я сделал действительно крутой плагин jQuery для обработки всех разновидностей эллипсиса текста, который называется ThreeDots @ http://tpgblog.com/threedots

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

Наслаждайтесь.

18
ответ дан 23 November 2019 в 22:51
поделиться

Это похоже на Алекса, но делает это в логарифмическом масштабе вместо линейного, и принимает параметр maxHeight. 

jQuery.fn.ellipsis = function(text, maxHeight) {
  var element = $(this);
  var characters = text.length;
  var step = text.length / 2;
  var newText = text;
  while (step > 0) {
    element.html(newText);
    if (element.outerHeight() <= maxHeight) {
      if (text.length == newText.length) {
        step = 0;
      } else {
        characters += step;
        newText = text.substring(0, characters);
      }
    } else {
      characters -= step;
      newText = newText.substring(0, characters);
    }
    step = parseInt(step / 2);
  }
  if (text.length > newText.length) {
    element.html(newText + "...");
    while (element.outerHeight() > maxHeight && newText.length >= 1) {
      newText = newText.substring(0, newText.length - 1);
      element.html(newText + "...");
    }
  }
};
2
ответ дан 23 November 2019 в 22:51
поделиться
Другие вопросы по тегам:

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