Блог

Как скрывать слишком длинные URL

Простая CSS заготовка для скрытия очень длинных URL, как мы знаем урлы представляют собой просто одно непрерывное слово, а слова как известно не переносятся — а значит ломают нашу верстку, этого мы не можем допустить и поэтому мы пишем простой CSS шаблон:

.break {
    -ms-word-break: break-all;
    word-break: break-all;
 
    word-break: break-word;
 
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
 
.ellipsis {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis; /* Required for IE8 */
    -o-text-overflow: ellipsis; /* Required for Opera */
    text-overflow: ellipsis;
}

После того как вы добавите данные стили к нужным элементам всё заработает как надо.

Оставить комментарий

avatar