Переполнение текста: многоточие в Firefox 4? (и FF5)
text-overflow:ellipsis; Свойство CSS должно быть одной из немногих вещей, которые Microsoft сделала правильно для Интернета.
Все другие браузеры теперь поддерживают это... кроме Firefox.
Разработчики Firefox спорят об этом с 2005 года, но, несмотря на очевидный спрос на него, они не могут заставить себя реализовать его (даже экспериментальный -moz- реализация будет достаточной).
Несколько лет назад кто-то разработал способ взлома Firefox 3, чтобы он поддерживал многоточие. Взлом использует -moz-binding особенность для реализации его с помощью XUL. Довольно много сайтов сейчас используют этот хак.
Плохие новости? Firefox 4 удаляет -moz-binding особенность, которая означает, что этот хак больше не будет работать.
Поэтому, как только Firefox 4 будет выпущен (я слышу, в конце этого месяца), мы вернемся к проблеме невозможности поддержки этой функции.
Итак, мой вопрос: есть ли другой способ обойти это? (Я пытаюсь избежать возврата к решению Javascript, если это возможно)
[РЕДАКТИРОВАТЬ]
Много голосов "за", так что я, очевидно, не единственный, кто хочет знать, но у меня пока есть один ответ, который в основном говорит "использовать javascript". Я все еще надеюсь на решение, которое либо вообще не будет нуждаться в JS, либо, в худшем случае, использует его как запасной вариант, когда функция CSS не работает. Поэтому я собираюсь опубликовать награду за этот вопрос, на случай, если кто-то где-то найдет ответ.
[РЕДАКТИРОВАТЬ]
Обновление: Firefox перешел в режим быстрой разработки, но, несмотря на выпуск FF5, эта функция все еще не поддерживается. И теперь, когда большинство пользователей обновили FF3.6, взлом уже не является решением. Хорошая новость: мне сказали, что он может быть добавлен в Firefox 6, который с новым графиком релизов должен выйти через несколько месяцев. Если это так, то я думаю, что могу подождать, но обидно, что они не смогли бы разобраться раньше.
[Окончательное редактирование]
Я вижу, что функция многоточия, наконец, была добавлена в "Аврору канал" Firefox (то есть, версия для разработки). Это означает, что теперь он должен быть выпущен как часть Firefox 7, выход которого запланирован на конец 2011 года. Какое облегчение.
Примечания к выпуску доступны здесь: https://developer.mozilla.org/en-US/Firefox/Releases/7
5 ответов
Spudley, вы могли бы достичь того же, написав небольшой JavaScript с использованием jQuery:
var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
// -4 to include the ellipsis size and also since it is an index
var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4);
trimmedText += elipsis;
$('#limitedWidthTextBox').val(trimmedText);
}
Я понимаю, что должен быть какой-то способ, которым все браузеры поддерживают это изначально (без JavaScript), но это то, что мы имеем на данный момент.
РЕДАКТИРОВАТЬ Кроме того, вы можете сделать его более аккуратным, прикрепив css класс для всех этих фиксированной ширины поля говорят fixWidthи затем сделайте что-то вроде следующего:
$(document).ready(function() {
$('.fixWidth').each(function() {
var limit = 50;
var ellipsis = "...";
var text = $(this).val();
if (text.length > limit) {
// -4 to include the ellipsis size and also since it is an index
var trimmedText = text.substring(0, limit - 4);
trimmedText += elipsis;
$(this).val(trimmedText);
}
}
}
РЕДАКТИРОВАТЬ 30/09/2011
FF7 отсутствует, эта ошибка устранена, и она работает!
РЕДАКТИРОВАТЬ 29/08/2011
Эта проблема помечена как решенная и будет доступна в FF 7; в настоящее время готовится к выпуску 27.09.2011.
Пометьте свои календари и будьте готовы удалить все взломанные файлы.
OLD
У меня есть другой ответ: подожди.
Команда разработчиков FF решает эту проблему.
У них есть предварительное исправление для Firefox 6.
Firefox 6!! Когда это выйдет?!?
Легкий там, воображаемый, чрезмерно реактивный человек. Firefox быстро развивается. FF6 выйдет через шесть недель после Firefox 5. Firefox 5 выйдет 21 июня 2011 года.
Так что это исправит где-то в начале августа 2011 года... надеюсь.
Вы можете подписаться на рассылку после ошибки по ссылке в оригинальном вопросе автора.
Или вы можете нажать здесь; что проще всего.
Я столкнулся с этим гремлином на прошлой неделе.
Поскольку принятое решение не учитывает шрифты переменной ширины, а решение wwwhack имеет цикл While, я добавлю свои $.02.
Мне удалось значительно сократить время обработки моей проблемы с помощью кросс-умножения. По сути, у нас есть формула, которая выглядит следующим образом:
Переменная x в этом случае - это то, что нам нужно решить. При возврате в виде целого числа это даст новую длину, которой должен быть переполненный текст. Я умножил MaxLength на 80%, чтобы дать эллипсам достаточно места, чтобы показать.
Вот полный пример HTML:
<html>
<head>
<!-- CSS setting the width of the DIV elements for the table columns. Assume that these widths could change. -->
<style type="text/css">
.div1 { overflow: hidden; white-space: nowrap; width: 80px; }
.div2 { overflow: hidden; white-space: nowrap; width: 150px; }
.div3 { overflow: hidden; white-space: nowrap; width: 70px; }
</style>
<!-- Make a call to Google jQuery to run the javascript below.
NOTE: jQuery is NOT necessary for the ellipses javascript to work; including jQuery to make this example work -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Loop through each DIV element
$('div').each(function(index) {
var myDiv = this; //The original Div element which will have a nodeType of 1 (e.g. ELEMENT_NODE)
var divText = myDiv; //Variable used to obtain the text from the DIV element above
//Get the nodeType of 3 (e.g. TEXT_NODE) from the DIV element. For this example, it will always be the firstChild
divText = divText.firstChild;
//Create another variable to hold the display text
var sDisplayText = divText.nodeValue;
//Determine if the DIV element is longer than it's supposed to be.
if (myDiv.scrollWidth > myDiv.offsetWidth) {
//Percentage Factor is just a way of determining how much text should be removed to append the ellipses
//With variable width fonts, there's no magic number, but 80%, should give you enough room
var percentageFactor = .8;
//This is where the magic happens.
var sliceFactor = ((myDiv.offsetWidth * percentageFactor) * sDisplayText.length) / myDiv.scrollWidth;
sliceFactor = parseInt(sliceFactor); //Get the value as an Integer
sDisplayText = sDisplayText.slice(0, sliceFactor) + "..."; //Append the ellipses
divText.nodeValue = sDisplayText; //Set the nodeValue of the Display Text
}
});
});
</script>
</head>
<body>
<table border="0">
<tr>
<td><div class="div1">Short Value</div></td>
<td><div class="div2">The quick brown fox jumps over the lazy dog; lots and lots of times</div></td>
<td><div class="div3">Prince</div></td>
</tr>
<tr>
<td><div class="div1">Longer Value</div></td>
<td><div class="div2">For score and seven year ago</div></td>
<td><div class="div3">Brown, James</div></td>
</tr>
<tr>
<td><div class="div1">Even Long Td and Div Value</div></td>
<td><div class="div2">Once upon a time</div></td>
<td><div class="div3">Schwarzenegger, Arnold</div></td>
</tr>
</table>
</body>
</html>
Я понимаю, что это только исправление JS, но пока Mozilla не исправит ошибку, я просто недостаточно умён, чтобы придумать решение CSS.
Этот пример работает лучше всего для меня, потому что JS вызывается каждый раз, когда сетка загружается в наше приложение. Ширина столбца для каждой сетки варьируется, и мы не можем контролировать, какой тип компьютеров наши пользователи Firefox просматривают в нашем приложении (что, конечно, у нас не должно быть такого элемента управления:)).
Должен сказать, что я немного разочарован тем, что единственным взломом браузера в моем приложении будет поддержка FF4. Приведенное выше решение javascript не учитывает шрифты переменной ширины. Вот более подробный сценарий, который объясняет это. Большая проблема с этим решением состоит в том, что если элемент, содержащий текст, скрыт при выполнении кода, тогда ширина поля неизвестна. Для меня это было нарушением условий сделки, поэтому я перестал работать над ним / тестировать его... но я решил опубликовать его здесь на случай, если он кому-нибудь пригодится. Убедитесь, что проверили это хорошо, поскольку мое тестирование было менее чем исчерпывающим. Я намеревался добавить проверку браузера, чтобы запускать код только для FF4, и позволить всем другим браузерам использовать их существующее решение.
Это должно быть доступно для возни здесь: http://jsfiddle.net/kn9Qg/130/
HTML:
<div id="test">hello World</div>
CSS:
#test {
margin-top: 20px;
width: 68px;
overflow: hidden;
white-space: nowrap;
border: 1px solid green;
}
Javascript (использует jQuery)
function ellipsify($c){
// <div $c> content container (passed)
// <div $b> bounds
// <div $o> outer
// <span $i> inner
// </div>
// <span $d></span> dots
// </div>
// </div>
var $i = $('<span>' + $c.html() + '</span>');
var $d = $('<span>...</span>');
var $o = $('<div></div>');
var $b = $('<div></div>');
$b.css( {
'white-space' : "nowrap",
'display' : "block",
'overflow': "hidden"
}).attr('title', $c.html());
$o.css({
'overflow' : "hidden",
'width' : "100%",
'float' : "left"
});
$c.html('').append($b.append( $o.append($i)).append($d));
function getWidth($w){
return parseInt( $w.css('width').replace('px', '') );
}
if (getWidth($o) < getWidth($i))
{
while (getWidth($i) > (getWidth($b) - getWidth($d)) )
{
var content = $i.html();
$i.html(content.substr(0, content.length - 1));
}
$o.css('width', (getWidth($b) - getWidth($d)) + 'px');
}
else
{
var content = $i.html();
$c.empty().html(content);
}
}
Это будет называться как:
$(function(){
ellipsify($('#test'));
});
Это чистое CSS-решение действительно близко, за исключением того факта, что оно вызывает многоточие после каждой строки.