Обработка длинных слов и URL-адресов (форсирование разрывов, переносов, эллипсис и т. Д.) онлайн урок.


Бывают случаи, когда очень длинная строка текста может переполнять контейнер макета.

Например:

URL-адреса обычно не содержат пробелов, поэтому они часто являются виновниками.

Вот большой фрагмент со всеми задействованными игроками CSS:

.dont-break-out {

/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;

-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;

/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

}

Это исправит проблему для нас:

Вот совок:

  • overflow-wrap: break-word;гарантирует, что длинная строка обернется и не выйдет из контейнера. Вы также можете использоватьword-wrap, а потому, что , поскольку спецификация говорит , они буквально просто чередуют имена друг для друга. Некоторые браузеры поддерживают один, а не другой. Firefox (протестирован v43) поддерживает толькоword-wrap. Blink (протестировал Chrome v45) займет один.
  • При использованииoverflow-wrapв использовании все само по себе слова будут разбиваться на все, что им нужно. Если есть символ «приемлемого разрыва» (например, буквальная тире, например), он сломается там, иначе он просто сделает то, что ему нужно сделать.
  • Вы также можете использоватьдефис, потому что тогда он попытается со вкусом добавить дефис, где он ломается, если браузер его поддерживает (Blink не на время написания, Firefox делает).
  • word-break: break-all;- сообщить браузеру, что это нормально, чтобы сломать слово, где ему нужно. Несмотря на то, что это все равно, так что я не уверен, в каких случаях это на 100% необходимо.

Если вы хотите быть более ручным с дефисами, вы можете предложить их в своей разметке. Подробнее на странице MDN .

# Поддержка браузера для дефисов

Согласно Могу ли я использовать :

Edge

.ellipses {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

Эта приятная вещь об использованииtext-overflowзаключается в том, что поддерживается универсально .

:

word-wrap

,

@mixin word-wrap() {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

@mixin ellipsis() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}