Ответственный заголовок ленточного типа

Question

Я пытаюсь создать заголовок типа ленты для веб-сайта, над которым я работаю, но я изо всех сил стараюсь, чтобы текст хорошо адаптировался к меньшему разрешению.

Есть ли способ заставить текст реагировать или переходить к двойной линии на меньших экранах?

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

h3.ribbon { 
background: #c3d5d8; 
margin-top: 0px !important; 
margin-left: -30px; 
padding-left: 20px; 
color: #fff; 
border-bottom: 40px solid #c3d5d8; 
border-right: 20px solid #fff; 
height: 0px; 
line-height: 40px; 
font-size: 18px !important; 
font-family: 'ProximaNovaThin'; 
text-rendering: optimizeLegibility !important; 
-webkit-font-smoothing: antialiased !important; 
font-weight: bold;} 

Заранее спасибо :-)

Answer 1

Вы можете использовать skew'd псевдо элемент для этого, позволяя текст, который нужно обернуть, если потребуется.

.title { 
 
    display: inline-block; 
 
    width: 70%; 
 
    min-height: 50px; 
 
    line-height: 50px; 
 
    background: lightgray; 
 
    position: relative; 
 
} 
 
.title:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 100%; 
 
    min-width: 120px; 
 
    width: 40%; 
 
    left: 80%; 
 
    background: lightgray; 
 
    transform: skewX(45deg); 
 
    z-index: -1; 
 
}

<div class="title">this is a long title............................a really long title! Like a super long title that should require a second line!</div>