Комментарии 80
Какие-то впечатлительные пользователи Хабра за демонстрацию длинного слова тут-же насрали в карму.
Огромное "спасибо" :(
Огромное "спасибо" :(
А зачем его было демонстрировать - просто чтобы порвать ленту в клочья?
Если это было так критично - почему не поставить ссылку с обьяснением или сделать это прямо в этом посте? Хотя и в таком случае заминусовали бы...
Если это было так критично - почему не поставить ссылку с обьяснением или сделать это прямо в этом посте? Хотя и в таком случае заминусовали бы...
Это веб 2.0 - на хабре проблема длинных слов решается именно так.
А чего вы хотели от этих задротышей?
А по-моему, очень полезная статья. Спасибо. При случае воспользуюсь.
Было интересно решение со стилями.
Может быть кто-то знает, существует какое-то более универсальное решение с помощью стилей?
Или легеньгий жабаскрипт подкиньте накрайняк :)
Может быть кто-то знает, существует какое-то более универсальное решение с помощью стилей?
Или легеньгий жабаскрипт подкиньте накрайняк :)
Самое простое для дива с контентом:
overflow:hidden
Особо длинные слова обрезаются по ширине дива. Элементарно.
overflow:hidden
Особо длинные слова обрезаются по ширине дива. Элементарно.
Трудно назвать подходящим решением, ведь слов просто становится не видно. Что модет нести потерю смысла.
довольносложносказать,чтооченьдлинноесловонесетсмыслвкоторыйктотобудетвчитыватьсяиточтоононедостойнообрезания
короче, написал длинную белебирду - не обижайся что она обрежется
все остальное - будет по границам дива и будет переноситься корректно
короче, написал длинную белебирду - не обижайся что она обрежется
все остальное - будет по границам дива и будет переноситься корректно
Вот смотрите. Сейчас наши комменты все время уменьшаются по ширине. Чем дальше будет идти эта ветка, тем меньше места будет оставаться. И довольно скоро вполне безобидное Zend_Controller_Action или Zend_Helpep_Action_invertCharacters уже не будет влезать по ширине.
Это говорит только о том, делать древовидные комментарии неограниченной вложенности путем простого добавления отступа слева, за счет уменьшения области контента - неправильно.
Откройте например http://habrahabr.ru/blog/apple/38023.htm…
и сожмите окно чтобы увидеть этот эффект: по слову в каждой строке.
Как решение этой проблемы - можно сделать минимальную ширину блока равной 80-100 символов.
А чтобы сохранить отступ достаточно сделать отступ не равномерным, а уменьшающимся с приростом уровня вложенности.
Откройте например http://habrahabr.ru/blog/apple/38023.htm…
и сожмите окно чтобы увидеть этот эффект: по слову в каждой строке.
Как решение этой проблемы - можно сделать минимальную ширину блока равной 80-100 символов.
А чтобы сохранить отступ достаточно сделать отступ не равномерным, а уменьшающимся с приростом уровня вложенности.
Интересно, какое слово такой длины может потерять смысл?
Это либо ссылка, либо чья-то шутка, либо у кого-то на клаве пробел не работает и человек это заметил после того, как отправил сообщение. В других случаях это бред писавшего.
Это либо ссылка, либо чья-то шутка, либо у кого-то на клаве пробел не работает и человек это заметил после того, как отправил сообщение. В других случаях это бред писавшего.
Хотя, конечно, удаление тоже такое делает, но удаление дает слову шанс, :) а overflow:hidden - нет.
Очень интересный пост.
И решение красивое.
ЗЫ Мог бы плюсануть - плюсанул.
И решение красивое.
ЗЫ Мог бы плюсануть - плюсанул.
повторюсь, но там где данные вводит третье лицо - overflow: hidden
1) разбить слово мягкими переносами через каждые N символов. Где N - максимально допустимая длина слова, которую вы установили. Так всегда и делаю.
>> Таким образом успешно вырезались все длинные слова. И при желании можно было легко "усовершенствовать" механизм, не вырезая слова полностью, а оставляя позволенную длину и добавляя троеточие.
А к тому же при наведении на слово в подсказке показывать все слово. Например, на Группах Гугла так скрываются емайлы
>> Таким образом успешно вырезались все длинные слова. И при желании можно было легко "усовершенствовать" механизм, не вырезая слова полностью, а оставляя позволенную длину и добавляя троеточие.
А к тому же при наведении на слово в подсказке показывать все слово. Например, на Группах Гугла так скрываются емайлы
вот такой способ использую я
function smarty_modifier_splitword($string, $wordmaxlen = 50, $hyp = " ")
{
return preg_replace('/([^\s]{' . intval($wordmaxlen) .'})+/U', '$1' . $hyp, $string);
}
в качестве $hyp можно использовать ­ — символ мягкого переноса. Правда говорят что этот символ не всегда корректно работает. У меня firefox 3b4 под Mac OS — в нем все работает правильно.
function smarty_modifier_splitword($string, $wordmaxlen = 50, $hyp = " ")
{
return preg_replace('/([^\s]{' . intval($wordmaxlen) .'})+/U', '$1' . $hyp, $string);
}
в качестве $hyp можно использовать ­ — символ мягкого переноса. Правда говорят что этот символ не всегда корректно работает. У меня firefox 3b4 под Mac OS — в нем все работает правильно.
может ставить принудительные пробелы? Сымысля думаю не теряе ться
НЛО прилетело и опубликовало эту надпись здесь
А как же функция wordwrap() в пхп? Я сам не юзаю, но судя по мануалу - практичное решение.
string wordwrap ( string str [, int width [, string break [, boolean cut]]] )
<?php
$text = "Очень длинное слоооооооооооооооово.";
$newtext = wordwrap($text, 8, "\n", 1);
echo "$newtext\n";
?>
string wordwrap ( string str [, int width [, string break [, boolean cut]]] )
<?php
$text = "Очень длинное слоооооооооооооооово.";
$newtext = wordwrap($text, 8, "\n", 1);
echo "$newtext\n";
?>
Долго думал над "первые три подхода". Сделайте сквозную нумерацию, раз так пишете.
Разбиение на слова пробелами не поможет в случае, если символами будут знаки препинания, например "!!!! !!!!" - не будет переноситься.
Также проблемы с переносом возникнут в случае "привет ,привет" - тут запятая поставлена не на то место.
К тому же wordwrap имеет смысл толькол в том случае, если у вам текст не сорежит html, если же он содержит, то она не подойдет и придется что-то сове писать... к тому же проблемы с UTF-8...
Также проблемы с переносом возникнут в случае "привет ,привет" - тут запятая поставлена не на то место.
К тому же wordwrap имеет смысл толькол в том случае, если у вам текст не сорежит html, если же он содержит, то она не подойдет и придется что-то сове писать... к тому же проблемы с UTF-8...
Не бояться потерять часть окончания, заменив многоточием.
$length = "100"; # Указываем сколько нужно
@array = split(/\s+/, $_[0]);
$_[1] = @array;
foreach $element(@array) {
$element_end = (length($element) > $length) ? "..." : "";
$element = substr($element, 0, $length).$element_end;
}
$_[0] = join (" ", @array);
какой это язык? смутно похоже на php, но конструкции типа foreach $element(@array) { вводят меня в ступор. :)
Да уж, решение не в стиле Perl. Вот примерно так надо:
#!/usr/bin/perl
my $str = qq(One of your old favourite songs from way back when);
my $len = 8; # максимально возможная длина слова, которая нас устраивает
$str =~ s!(\S{$len,})!" ".substr($1, 0, ($len == length($1) ? $len - 3 : $len))." "!eg;
print $str;
#!/usr/bin/perl
my $str = qq(One of your old favourite songs from way back when);
my $len = 8; # максимально возможная длина слова, которая нас устраивает
$str =~ s!(\S{$len,})!" ".substr($1, 0, ($len == length($1) ? $len - 3 : $len))." "!eg;
print $str;
Нет слова "троеточие" в русском языке.
Есть "многоточие".
Есть "многоточие".
Я пошел в решении этой проблемы с другого конца - не пытаться придумывать магические способы, как с помощью CSS, JavaScript, PHP вывести длинный контент, уже попавший в базу, а предотвратить его поподание в момент ввода пользователем (администратором), указав ему, что контент вылезает за рамки предусмотренные дизайном.
Примеры использования с описанием и исходниками: http://goldenman.spb.ru/development/jquery/limiter/
Примеры использования с описанием и исходниками: http://goldenman.spb.ru/development/jquery/limiter/
А если на ресурсе позволено публиковать ссылки? Т.о. пользователь не сможет опубликовать длинную сложную ссылку.
Если у нас гиперссылка, то программа в теге <A> её не трогает, а зрителю показывает усечённый вариант, к примеру (если использовать снова Perl, смотрим вышеприведённый пример):
$text_after = "<A HREF=$text_to TARGET=_blank>".substr($text_to, 0, $length)."...</A>";
В этом случае делаем, чтобы рендер воспринмал вводимый текст не как plain-text, а как html. То есть в этом плане никаких проблем - хоть ссылки, хоть черти-чё. В примерах этого нету, так как у меня не возникало такой задачи, но вопрос хороший - нужно будет добавить поддержку ввода HTML-ем.
Нашёл отличный вариант расстановки мягких пробелов: тег wbr (http://www.quirksmode.org/oddsandends/wb…). Его и пользуем.
Для оперы отдельное правило в css: wbr:after { content: "\00200B" }
Для оперы отдельное правило в css: wbr:after { content: "\00200B" }
В «Опере» ­ работает, там ни к чему костыли.
На фоне фокусов IE, правило для оперы не считаю костылём. После анализа статьи по ссылке пришёл к выводу, что использование тега wbr - наиболее приемлимый вариант. Иначе пришлось бы генерировать разный код для разных браузеров. Как говорится, меньшее из двух зол.
Вставляем в длинные слова .
Для оперы css fix:
wbr:after { content: "\00200B" }
Для оперы css fix:
wbr:after { content: "\00200B" }
[^\s]{512,}? Что это ещё такое? \S{512,} не пробовали?
Пишем
<span title="style="overflow:hidden;<br">style="overflow:hidden;<b... /> и не будет полос прокрутки
<span title="style="overflow:hidden;<br">style="overflow:hidden;<b... /> и не будет полос прокрутки
недавно заюзал примерно такую конструкцию
<span title="$s=chunk_split($s,40,"\n");">$s=chunk_split($s,40,"\n"...
а для ссылок конечно правильно быдут показывать часть ссылки с полным title
<span title="$s=chunk_split($s,40,"\n");">$s=chunk_split($s,40,"\n"...
а для ссылок конечно правильно быдут показывать часть ссылки с полным title
Я конечно не гуру ПХП, говорят язык красивый.
Но чем вас не устраивает такая конструкция: $text =~ s/\w{5,}/.../g;?
Но чем вас не устраивает такая конструкция: $text =~ s/\w{5,}/.../g;?
Как я посмотрю, большинство комментаторов склоняется к разбиению длинных слов пробелами. Да это будет работать если это действительно слово, но если это просто будет длинная ссылка, например ведущая на поисковые результаты яндекса, установка пробела сделает эту ссылку не работоспособной. Так что все конструкции устанавливающие пробел необходимо дополнять проверкой не начинается ли это длинное слово с http:// https:// ftp:// и пр.
Я использую для разбивки слов $s=chunk_split...
А для ссвлок считаю рациональным показывать часть ссылки с полным title
А для ссвлок считаю рациональным показывать часть ссылки с полным title
А тег уже не работает?)
Вот тут написано про text-overflow
http://habrahabr.ru/blog/webdev/35441.html
http://habrahabr.ru/blog/webdev/35441.html
Ещё могу такой вариант предложить.
pre, code {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
word-wrap: break-word теперь работает практически во всех браузерах, неплохо бы поправить статью.
В этом варианте как быть с кириллицей? Так кириллица обрезается в два раза короче.
и остается артефакт:
считывать/запис�...
preg_replace('/([^\s]{30})[^\s]+/', '$1...', $string)и остается артефакт:
считывать/запис�...
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Очень длинные слова — что делать?