Отзывчивый заголовок с углом одной стороны

Question

Когда браузер полностью изменяет размер после переполнения псевдоэлементов и вызывает проблемы. Я ищу способ исправить это. Просто измените размер браузера, пока не получите текст заголовка.

Вот демо задачи: http://codepen.io/anon/pen/grKNoJ

.section { 
    font-family: 'Quantico'; 
    font-weight: bold; 
    font-size: 36px; 
    color: white; 
    border-top: solid 1px black; 
    text-transform: uppercase; 
    margin-bottom: 28px; 
} 

.section-title { 
    background-color: black; 
    display: inline-block; 
    padding: 8px 18px; 
    position: relative; 
} 
.section-title:after { 
    content: " "; 
    position: absolute; 
    display: block; 
    right: 0; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    background: #000; 
    transform-origin: bottom left; 
    -ms-transform: skew(-30deg, 0deg); 
    -webkit-transform: skew(-30deg, 0deg); 
    transform: skew(-30deg, 0deg); 
} 

Answer 1

Вы можете это исправить, добавив text-overflow: ellipsis; и white-space: nowrap; к .section-title.

Вы также можете установить max-width этому элементу и установить его в соответствии с вашими медиа-запросами и настроить его на разных устройствах.

Вот обновленный результат: http://codepen.io/johnnykb/pen/mPKZLg