перенос слов на очень длинную строку

Question

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

Например, он (очень неприятно) перекрывает элементы div, вызывает горизонтальную прокрутку и т. д.wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

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

Answer 1

Этот вопрос уже задавался здесь раньше:

• Кто решил проблему длинных слов в моем div?(намекать:не 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 лет это будет решение этой проблемы).

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

Answer 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 на наличие собственного кода, но никаких признаков его обнаружено не было.

Answer 3

word-break:break-all работает приятно

Answer 4

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

* {
   overflow-wrap:hyphenate. 
}

На момент написания статьи на iphone или firefox, похоже, никак не поддерживается, а overflow-wrap:hyphenate даже не находится в рабочем проекте.

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

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

Answer 5

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

Answer 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;

Answer 7

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

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

Answer 8

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

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

Answer 9

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

Answer 10

Кажется, это помогает последней версии Chrome:

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

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