Разрывайте огромные URL-адреса, чтобы они не переполнялись - PullRequest
6 голосов
/ 05 сентября 2011

Есть ли способ заставить огромные URL, такие как http://www.google.de/search?q=65daysofstatic&hl=de&safe=off&prmd=ivnsl&source=lnms&tbm=isch&ei=P9NkToCRMorHsgaunaClCg&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CBkQ_AUoAQ&biw=1697&bih=882 break, при отображении на веб-сайте?Я бы предпочел сократить его, но там, где я работаю, меня попросили показать весь URL, но у меня есть только пространство размером 320 пикселей, чтобы показать его, и оно переполняется.либо опция, и добавление стиля к тд, где содержится URL, просто игнорируется.

Ответы [ 4 ]

13 голосов
/ 05 сентября 2011

CSS3 имеет новую функцию:

word-wrap:break-word;

Вы можете увидеть живой пример здесь (у вас должен быть браузер, совместимый с этой новой функцией).

Это также та же методика, принятая StackOverflow, если вы изучите свой длинный URL, вы заметите.

В качестве альтернативы вы можете попробовать Гифенатор .

8 голосов
/ 29 мая 2012
-ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Вышеописанное работает в Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ и Chrome 13+.

4 голосов
/ 17 сентября 2018

В Chrome word-wrap не работает. Вы должны использовать:

word-break: break-all;

Если вы хотите применить его только к тегам, то вы должны использовать:

a {word-break: break-all;}

Обратите внимание, что break-all будет даже разбивать слова, поэтому слово может начинаться в одной строке и заканчиваться в другой, поэтому рекомендуется применять его только к тегам a. Если вы знаете, что в ваших ссылках всегда содержатся слова (например, это не что-то вроде mylink / abcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnz0), вы не можете использовать свое имя:

body {word-break: break-word;}
1 голос
/ 17 июня 2017

Я использую это правило, чтобы влиять только на якоря.

.my-paragraph p a[href] {
  word-wrap:break-word;
}
...