響應標題與角度一側

當瀏覽器被調整大小後，絕對定位在僞元素溢出並導致問題。我正在尋找解決這個問題的方法。只需調整瀏覽器的大小，直到找到標題文本。響應標題與角度一側

這是問題的一個演示：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); 
}

來源

2016-04-21 GorillaApe

相關（或可能重複）http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive – Harry

@Harry及其相關但我認爲它不是愚蠢的，因爲這涉及文字 – GorillaApe

您可以通過添加text-overflow: ellipsis;和white-space: nowrap;到.section-title修復它。

您也可以將max-width設置爲該元素，並根據您的媒體查詢將其設置爲不同的值，並使其滿足您在不同設備上的需求。

這裏是更新的結果：http://codepen.io/johnnykb/pen/mPKZLg

來源

2016-04-21 08:21:12

，但瀏覽器仍然水平滾動。 – GorillaApe

@GorillaApe簽出新的代碼。將'overflow：hidden;'添加到'.section'將會實現。 –

響應標題與角度一側

回答

相關問題