WordPrap очень длинная строка - PullRequest
Новая
       56

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

71 голосов
/ 13 мая 2009

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

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

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

Ответы [ 10 ]

86 голосов
/ 13 мая 2009

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

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

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

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

31 голосов
/ 15 декабря 2009

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

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

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

25 голосов
/ 19 июля 2013

word-break:break-all работает угощение

9 голосов
/ 27 апреля 2012

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

* {
   overflow-wrap:hyphenate. 
}

Похоже, что на момент написания на iphone или firefox, похоже, еще нигде не поддерживается, и переполнение: дефис даже не находится в рабочем проекте.

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

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}
3 голосов
/ 14 февраля 2014

Я использую код для предотвращения всех длинных строк, 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;
3 голосов
/ 25 марта 2013 
display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; // or whatever is best for you
2 голосов
/ 13 мая 2009

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

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

1 голос
/ 02 января 2013

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

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}
0 голосов
/ 01 декабря 2014

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

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

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

0 голосов
/ 20 ноября 2014

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

...