smartov Mar 21 2008 at 15:44

Очень длинные слова — что делать?

2 min

16K

Website development*

+62

Comments 80

smartov Mar 21 2008 at 16:21

Какие-то впечатлительные пользователи Хабра за демонстрацию длинного слова тут-же насрали в карму.
Огромное "спасибо" :(

track13 Mar 21 2008 at 16:30

А зачем его было демонстрировать - просто чтобы порвать ленту в клочья?
Если это было так критично - почему не поставить ссылку с обьяснением или сделать это прямо в этом посте? Хотя и в таком случае заминусовали бы...

track13 Mar 21 2008 at 16:32

ссылка уже есть, вижу... просто сначала лично я принял тот пост за спам

smartov Mar 21 2008 at 16:35

Я не сразу понял в чем дело, только после первого минуса... :) Но да, теперь там объяснение и ссылка.

Zerkella Mar 21 2008 at 17:55

Это веб 2.0 - на хабре проблема длинных слов решается именно так.

trankov Mar 21 2008 at 18:33

А чего вы хотели от этих задротышей?

BitterEnd Mar 21 2008 at 16:27

А по-моему, очень полезная статья. Спасибо. При случае воспользуюсь.

Nocka Mar 21 2008 at 16:27

Было интересно решение со стилями.
Может быть кто-то знает, существует какое-то более универсальное решение с помощью стилей?
Или легеньгий жабаскрипт подкиньте накрайняк :)

dab512 Mar 21 2008 at 16:30

Самое простое для дива с контентом:

overflow:hidden

Особо длинные слова обрезаются по ширине дива. Элементарно.

smartov Mar 21 2008 at 16:33

Трудно назвать подходящим решением, ведь слов просто становится не видно. Что модет нести потерю смысла.

dab512 Mar 21 2008 at 16:35

довольносложносказать,чтооченьдлинноесловонесетсмыслвкоторыйктотобудетвчитыватьсяиточтоононедостойнообрезания
короче, написал длинную белебирду - не обижайся что она обрежется
все остальное - будет по границам дива и будет переноситься корректно

smartov Mar 21 2008 at 16:37

Вот смотрите. Сейчас наши комменты все время уменьшаются по ширине. Чем дальше будет идти эта ветка, тем меньше места будет оставаться. И довольно скоро вполне безобидное Zend_Controller_Action или Zend_Helpep_Action_invertCharacters уже не будет влезать по ширине.

dab512 Mar 21 2008 at 16:49

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

Откройте например http://habrahabr.ru/blog/apple/38023.htm…
и сожмите окно чтобы увидеть этот эффект: по слову в каждой строке.

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

smartov Mar 21 2008 at 17:13

Ну, насколько видите, есть случаи (например как у меня - с рекламой) когда overflow:hidden не спасает.

gdX Mar 21 2008 at 18:34

Интересно, какое слово такой длины может потерять смысл?
Это либо ссылка, либо чья-то шутка, либо у кого-то на клаве пробел не работает и человек это заметил после того, как отправил сообщение. В других случаях это бред писавшего.

dr_brain Mar 21 2008 at 19:27

например японцы практически не используют пробелов.
причём если где нибудь не там, автоматически вставить пробел,
то смысл фразы может очень сильно поменятся :(

absolvo Mar 21 2008 at 22:54

Вы часто для японцев кодите?

dr_brain Mar 24 2008 at 11:52

вообще то, да :)

absolvo Mar 24 2008 at 22:13

А можно посмотреть работы? :)

dr_brain Mar 24 2008 at 23:58

К сожалению нет :(
(небольшие веб-приложения, для внутреннего использования заказчега)

smartov Mar 21 2008 at 16:34

Хотя, конечно, удаление тоже такое делает, но удаление дает слову шанс, :) а overflow:hidden - нет.

Borro Mar 21 2008 at 16:31

Очень интересный пост.
И решение красивое.
ЗЫ Мог бы плюсануть - плюсанул.

devilmaydie Mar 21 2008 at 16:36

повторюсь, но там где данные вводит третье лицо - overflow: hidden

atukai Mar 21 2008 at 16:39

1) разбить слово мягкими переносами через каждые N символов. Где N - максимально допустимая длина слова, которую вы установили. Так всегда и делаю.

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

А к тому же при наведении на слово в подсказке показывать все слово. Например, на Группах Гугла так скрываются емайлы

graber Mar 21 2008 at 17:36

вот такой способ использую я

function smarty_modifier_splitword($string, $wordmaxlen = 50, $hyp = " ")
{
return preg_replace('/([^\s]{' . intval($wordmaxlen) .'})+/U', '$1' . $hyp, $string);
}

в качестве $hyp можно использовать  — символ мягкого переноса. Правда говорят что этот символ не всегда корректно работает. У меня firefox 3b4 под Mac OS — в нем все работает правильно.

Heath Mar 21 2008 at 18:54

В FireFox 2.0 мягкие переносы не работают.

noxon Mar 21 2008 at 17:08

может ставить принудительные пробелы? Сымысля думаю не теряе ться

UFO landed and left these words here

dandelion Mar 21 2008 at 17:12

А как же функция wordwrap() в пхп? Я сам не юзаю, но судя по мануалу - практичное решение.
string wordwrap ( string str [, int width [, string break [, boolean cut]]] )
<?php
$text = "Очень длинное слоооооооооооооооово.";
$newtext = wordwrap($text, 8, "\n", 1);
echo "$newtext\n";
?>

smartov Mar 21 2008 at 17:15

Спасибо, тоже верно. Хотя у этой функции и есть проблемы с кодировкаи, в отличие от регулярных выражений. Добавлю.

alexxz Mar 21 2008 at 17:18

ну, не совсем практичное 8) нет встроенной поддержки mb_wordwrap, для тех кто идёт в ногу со временем.

atukai Mar 21 2008 at 17:28

в комментах по функции wordwrap на php.net есть много хороших решений

oowl Mar 21 2008 at 17:27

Долго думал над "первые три подхода". Сделайте сквозную нумерацию, раз так пишете.

smartov Mar 21 2008 at 17:32

Согласен, непонятно.

Damnedest Mar 21 2008 at 17:32

Разбиение на слова пробелами не поможет в случае, если символами будут знаки препинания, например "!!!! !!!!" - не будет переноситься.

Также проблемы с переносом возникнут в случае "привет ,привет" - тут запятая поставлена не на то место.

К тому же wordwrap имеет смысл толькол в том случае, если у вам текст не сорежит html, если же он содержит, то она не подойдет и придется что-то сове писать... к тому же проблемы с UTF-8...

Pyu Mar 21 2008 at 17:44

Не бояться потерять часть окончания, заменив многоточием.



  $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);

graber Mar 21 2008 at 18:11

какой это язык? смутно похоже на php, но конструкции типа foreach $element(@array) { вводят меня в ступор. :)

Damnedest Mar 21 2008 at 18:14

perl

Bonch Mar 21 2008 at 23:12

Да уж, решение не в стиле 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;

false Mar 22 2008 at 03:10

Доктор, perl -e '$a="longworldverylongworld aaaaaaaaaa vvvvvvvv"; $a=~s/\w{5,}/.../g; print $a'

peroon2 Mar 21 2008 at 17:54

Нет слова "троеточие" в русском языке.
Есть "многоточие".

GolDen Mar 21 2008 at 18:00

Я пошел в решении этой проблемы с другого конца - не пытаться придумывать магические способы, как с помощью CSS, JavaScript, PHP вывести длинный контент, уже попавший в базу, а предотвратить его поподание в момент ввода пользователем (администратором), указав ему, что контент вылезает за рамки предусмотренные дизайном.

Примеры использования с описанием и исходниками: http://goldenman.spb.ru/development/jquery/limiter/

peroon2 Mar 21 2008 at 18:09

А если на ресурсе позволено публиковать ссылки? Т.о. пользователь не сможет опубликовать длинную сложную ссылку.

Pyu Mar 21 2008 at 18:50

Если у нас гиперссылка, то программа в теге <A> её не трогает, а зрителю показывает усечённый вариант, к примеру (если использовать снова Perl, смотрим вышеприведённый пример):

$text_after = "<A HREF=$text_to TARGET=_blank>".substr($text_to, 0, $length)."...</A>";

GolDen Mar 21 2008 at 19:09

В этом случае делаем, чтобы рендер воспринмал вводимый текст не как plain-text, а как html. То есть в этом плане никаких проблем - хоть ссылки, хоть черти-чё. В примерах этого нету, так как у меня не возникало такой задачи, но вопрос хороший - нужно будет добавить поддержку ввода HTML-ем.

bolk Mar 21 2008 at 18:30

Вот способ:

http://bolknote.ru/2007/11/03/~1444/

bolk Mar 21 2008 at 18:35

В смысле, способ имитировать мягкий перенос в FF

Heath Mar 21 2008 at 19:01

Лучше дождаться релиза FF3 (не бета), и всем радостно перейти на него. :)

bolk Mar 21 2008 at 19:15

Люди и на FF1.5 сидят, так что куда там…

rsa Mar 21 2008 at 18:45

Нашёл отличный вариант расстановки мягких пробелов: тег wbr (http://www.quirksmode.org/oddsandends/wb…). Его и пользуем.
Для оперы отдельное правило в css: wbr:after { content: "\00200B" }

bolk Mar 21 2008 at 19:15

В «Опере»  работает, там ни к чему костыли.

rsa Mar 21 2008 at 19:20

На фоне фокусов IE, правило для оперы не считаю костылём. После анализа статьи по ссылке пришёл к выводу, что использование тега wbr - наиболее приемлимый вариант. Иначе пришлось бы генерировать разный код для разных браузеров. Как говорится, меньшее из двух зол.

bolk Mar 21 2008 at 19:22

В IE и Opera работает «». Именно использование WBR и прочего является костылём для FF.

rsa Mar 21 2008 at 19:25

Поскольку мне нужно, чтобы работало везде, пришлось использовать костыль. Кстати интересно, как вы решаете эту проблему? Ну допустим, для ие и оперы. А в других браузерах? Отдельный код?

bolk Mar 21 2008 at 19:26

обычно — overflow, но я придумал более пугающий способ :)

http://bolknote.ru/2007/11/03/~1444/

rsa Mar 21 2008 at 19:30

На вкус и цвет... :)

bolk Mar 21 2008 at 19:35

Ну, это просто разные вещи — в моём способе символ переноса появляется. А с WBR — нет.

vithar Mar 22 2008 at 00:18

http://harisov.livejournal.com/97666.htm…

gurets Mar 21 2008 at 18:50

Вставляем в длинные слова .
Для оперы css fix:
wbr:after { content: "\00200B" }

rsa Mar 21 2008 at 19:03

Повторяемся :)

besisland Mar 21 2008 at 19:04

[^\s]{512,}? Что это ещё такое? \S{512,} не пробовали?

sp3ctr00m Mar 21 2008 at 19:26

Пишем
<span title="style="overflow:hidden;<br">style="overflow:hidden;<b... /> и не будет полос прокрутки

ganzer Mar 21 2008 at 20:10

недавно заюзал примерно такую конструкцию
<span title="$s=chunk_split($s,40,"\n");">$s=chunk_split($s,40,"\n"...

а для ссылок конечно правильно быдут показывать часть ссылки с полным title

false Mar 22 2008 at 03:12

Я конечно не гуру ПХП, говорят язык красивый.

Но чем вас не устраивает такая конструкция: $text =~ s/\w{5,}/.../g;?

smartov Mar 22 2008 at 11:04

Наверное тем, что это перловая конструкция, да? :)

false Mar 22 2008 at 15:45

ну так и в пхп должен быть substitution, ПХП же прямой наследник Перла.

smartov Mar 22 2008 at 16:12

В статейке выше все написано.

false Mar 22 2008 at 16:23

Улыбнуло, статейка.

Zex0n Mar 22 2008 at 10:41

Как я посмотрю, большинство комментаторов склоняется к разбиению длинных слов пробелами. Да это будет работать если это действительно слово, но если это просто будет длинная ссылка, например ведущая на поисковые результаты яндекса, установка пробела сделает эту ссылку не работоспособной. Так что все конструкции устанавливающие пробел необходимо дополнять проверкой не начинается ли это длинное слово с http:// https:// ftp:// и пр.

ganzer Mar 22 2008 at 11:02

Я использую для разбивки слов $s=chunk_split...
А для ссвлок считаю рациональным показывать часть ссылки с полным title

legato_di Mar 22 2008 at 14:44

А тег уже не работает?)

legato_di Mar 22 2008 at 15:01

ой) я про тег NOBR говорил)

hemper Mar 23 2008 at 15:39

Вот тут написано про text-overflow
http://habrahabr.ru/blog/webdev/35441.html

absolvo Mar 24 2008 at 13:40

Ещё могу такой вариант предложить.

smartov Mar 24 2008 at 15:36

Есть подобное в посте по ссылке выше, но там только для Лисы.
А почему у вас background-repeat: no-repeat; а не background-repeat: repeat-y; ?

absolvo Mar 24 2008 at 16:36

Потому что там картинка по высоте равно высоте строки :)
Но через repeat-y; безусловно правильней, ну и пнгшку высотой 1px

SamDark Apr 15 2008 at 21:03

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+ */
}

fortyseven May 23 2012 at 22:56

word-wrap: break-word теперь работает практически во всех браузерах, неплохо бы поправить статью.

gr33tx Jul 20 2013 at 23:41

В этом варианте как быть с кириллицей? Так кириллица обрезается в два раза короче.

preg_replace('/([^\s]{30})[^\s]+/', '$1...', $string)

и остается артефакт:

считывать/запис�...

smartov Jul 23 2013 at 05:23

скорее всего у вас не выставлена правильная локаль

setlocale('ru_RU.UTF-8')

должно решить проблему.