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

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

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

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

Ответ 1

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

Короче говоря:

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

Нижняя строка состоит в том, что если для вас очень важно прекратить это с переносом текста на следующую строку, единственное разумное решение - ввести  (мягкий дефис), <wbr> (тег разрыва слова) или  (нулевая ширина пробел, тот же эффект, что и  минус дефис) на стороне вашего сервера. Однако, если вы не против Javascript, есть hyphenator, который кажется довольно прочным.

Ответ 2

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 для проприетарного кода, но никаких признаков нет.

Ответ 3

word-break:break-all работает с лечением

Ответ 4

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

* {
   overflow-wrap:hyphenate. 
}

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

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

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}

Ответ 5

display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; // or whatever is best for you

Ответ 6

Я использую код для предотвращения всех длинных строк, URL-адресов и т.д.

 -ms-word-break: break-all;

/* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

/* Non standard for webkit */
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Ответ 7

Надеемся, что когда-нибудь мы получим доступ к свойству word-wrap в CSS3: Force Wrapping: свойство word-wrap.

Когда-нибудь...

Ответ 8

Обычно ячейки будут делать это естественно, но вы можете заставить это поведение на div с:

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}

Ответ 9

Всегда указывайте свойство line-height - если вы не укажете, это может привести к поломке вашего свойства word-break: break-all;.

Ответ 10

Кажется, что это делает трюк для последнего Chrome:

[the element],
[the element] * {
  word-wrap: break-word;
  white-space: pre;
}

Я не проверял ни одного браузера, кроме Chrome.