wordwrap очень длинная строка

Как вы можете отображать длинную строку, адрес веб-сайта, слово или набор символов с автоматическими разрывами строк, чтобы сохранить ширину div? Наверное, это словосочетание. Обычно добавление пространства работает, но есть ли такое решение CSS, как word-wrap?

Например, он (очень наглый) перекрывает divs, заставляет горизонтальную прокрутку и т. Д. Wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

Что я могу добавить к указанной выше строке, чтобы она аккуратно вписывалась в несколько строк в div или в окне браузера?

css,string,long-integer,word-wrap,

70

Ответов: 10

85 принят

Этот вопрос задан здесь раньше:

  • Кто решил проблему с длинными словами? (подсказка: не stackoverflow)
  • перенос слов в css / js
  • CSS: как я могу заставить длинную строку (без какой-либо пустой) обернуть в XUL и / или HTML?
  • Переполнение CSS с длинным URL-адресом

Короче:

Что касается решений CSS, то вы должны: overflow: scroll;заставить элемент показывать полосы прокрутки и overflow:hidden;просто отключать дополнительный текст. Однако есть text-overflow:ellipsis;и word-wrap: break-word;но они только IE ( break-wordв проекте CSS3, так что это будет решение для этого через 5 лет).

Суть в том, что если для вас очень важно прекратить это с переносом текста на следующую строку, единственным разумным решением является инъекция &shy;(мягкая дефис), <wbr>(тег разрыва слова) или &#8203;(пространство с нулевой шириной, такой же эффект, как &shy;минус-дефис) на стороне вашего сервера. Однако, если вы не возражаете против Javascript, есть дефинатор, который кажется довольно солидным.

31

word-wrap: break-word;доступен в браузерах IE7 +, FF 3.5 и Webkit (Safari / Chrome и т. д.). Для обработки IE6 вам также необходимо объявитьword-wrap: break-all;

Если FF 2.0 не находится в вашей матрице браузера, то использование этого является жизнеспособным решением. К сожалению, он не переносит предыдущую строку, где сломано слово, которое является типографским кошмаром. Я бы предложил использовать Hyphenator, как предложил Паоло, который ненавязчивый JavaScript. Падение назад для пользователей, не поддерживающих JavaScript, будет сломанным словом без дефиса. Я могу жить с этим пока. Эта проблема, скорее всего, возникнет в CMS, где веб-дизайнер не имеет контроля над тем, какой контент будет введен или где могут быть реализованы разрывы строк и программные дефисы.

Я взглянул на спецификацию W3, где обсуждаются переносы в CSS3. К сожалению, есть несколько предложений, но ничего конкретного пока нет. Похоже, что разработчики браузеров еще ничего не реализуют. Я проверил как Mozilla, так и Webkit для проприетарного кода, но никаких признаков нет.

22

word-break:break-all работает

9

Просто упомянул об этом здесь, но, вероятно, более уместен в этом вопросе. Лучшее свойство скоро будет переполнением. и наилучшее значение, если оно будет реализовано, будет:

* {
   overflow-wrap:hyphenate. 
}

Кажется, что не поддерживается ни в коем случае только во время написания на iphone или firefox и переполнения: переносчик даже не работает в рабочем черновике.

в то же время я бы использовал:

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}
3 
display: block;
переполнение: скрыто;
переполнение текста: многоточие;
ширина: 200 пикселей; // или что лучше для вас
CSS, строка, длинное целое, перенос слова,
Похожие вопросы
Яндекс.Метрика