Заворачивать длинные слова в чат - PullRequest
Новая
       5

Заворачивать длинные слова в чат

1 голос
/ 17 ноября 2010

Я пытаюсь найти решение для упаковки слов, которые очень длинные, в чат. Например, если кто-то пишет путь к файлу или кто-то просто пишет кучу чепухи. Например: 

blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahnonsensenonsensenonsensenonsense

Shoutbox может иметь несколько значений ширины (в зависимости от того, где он расположен), поэтому установка ширины для внешнего тега не будет подходящей, так как содержимое должно расширяться, чтобы заполнить ширину на странице. Теперь внутри этого внешнего тега есть внутренние теги, которые содержат каждый крик внутри него.

Теперь я сделал домашнюю работу по этому вопросу, и было сказано, что это будет работать: 

.yourclass(#youid)
{
   word-wrap: break-word; /* Internet Explorer 5.5+ */
   white-space: normal; /* Firefox */
}

Но мне нужно, чтобы это работало во всех 5 основных браузерах: Firefox, Internet Explorer 7 и 8, Opera, Chrome и Safari. Есть ли решение для всех 5 основных браузеров?

Примечание: я не возражаю против объединения CSS, JS, PHP и / или любого другого языка, чтобы заставить это работать правильно.

Кто-нибудь сталкивался с этой проблемой? Кто-нибудь когда-нибудь разрешал это? Я смотрю на функцию php wordwrap , но это мне не помогает, так как для этого нужно количество символов. Могло бы помочь, если бы я мог определить ширину в пикселях и, если слово превышает эту ширину, перенести следующий символ на следующую строку вниз. Проблема с использованием символов для переноса слов заключается в том, что эти символы могут иметь разный размер шрифта, и это НЕ будет согласованным и НЕ поможет вообще. Возможно, есть способ определить ширину каждого символа? И если эта ширина превосходит ширину чата, чем перенести ее на следующую строку? Это может на самом деле сработать, но я не знаю, как это определить.

Может кто-нибудь, пожалуйста, помогите мне? Спасибо:)

Вот ссылка, где я использую вышеуказанный CSS => http://acs.graphicsmayhem.com/spoogs/index.php

На самом деле это очень длинное слово в Opera оборачивает все три из них в Opera, может кто-нибудь протестировать в других браузерах и дать мне какой-нибудь отзыв об этом?

Ответы [ 3 ]

2 голосов
/ 17 ноября 2010

word-wrap: break-word; действительно то, что вы ищете.Не уверен, работает ли он в Opera, но все остальные должны работать.

0 голосов
/ 17 ноября 2010

Я предлагаю вам использовать два метода ниже:

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

Надеюсь, что поможет

0 голосов
/ 17 ноября 2010

Ваш выбор (на мой взгляд):

  1. Используйте решение, которое не работает для всех браузеров, или
  2. Используйте CSS overflow:auto или overflow:hidden, чтобы сохранить размер контейнера позволяя непрерывным словам течь через край, или
  3. Разбить с ограничением символов (на сервере или клиенте) и «разбить» бессмысленный текст, или
  4. Выполнить быстрое (но видимое пользователю) разбиение и повторное разбиение текста на разных пределы персонажа, пока вы не найдете ситуацию, где scrollWidth <= clientWidth. (Это потребует повторных вызовов setTimeout, чтобы позволить браузеру перетекать после вашего изменить, прежде чем вы сможете измерить эффект.)

Полагаю, вы могли бы также использовать грубую эвристику, основанную на известном размере шрифта и измеренной ширине, но это также не соответствует тому, что кажется вашим критерием точности. Мне жаль говорить что то, что вы хотите (насколько я понимаю), не представляется возможным при использовании данной технологии.

...