內容出現在div

我最近嘗試了在div與像三角形梯形等內容出現在div

HTML不同的形狀以外：

<div class="triangle">HI nice to meet you guys</div>

CSS

.triangle { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid blue; 
}

此前，當div是一個正方形（高度和寬度都是100px）時，內容會正常顯示。

當我將div設置爲三角形樣式時，內容就會出現。

如何使這個比例爲了正確顯示在div中。

見琴：http://jsfiddle.net/7qbGX/2/

任何建議將是巨大的。

來源

2013-09-25 Vignesh Pichamani

你的div是不可見的，它沒有大小，只有邊框可見，所以內容溢出。 – adeneo

...並且內容在左邊界的末尾正好在預期的位置開始。 – insertusernamehere

感謝您的回覆或者是否有方法顯示三角形內的內容 –

試試這個：LINK

.triangle{ 
    width: 0px; 
    height: 0px; 
    border-style: inset; 
    border-width: 0 100px 173.2px 100px; 
    border-color: transparent transparent #007bff transparent; 
    float: left; 
    transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
} 

.triangle p { 
    text-align: center; 
    top: 80px; 
    left: -47px; 
    position: relative; 
    width: 93px; 
    height: 93px; 
    margin: 0px; 
}

來源

2013-09-25 11:13:24 Bip

這不會如果p標籤的內容更多，則工作。 http://jsfiddle.net/TRuQc/144/ –

修復關閉'p'標籤在你的小提琴中，否則看起來不錯。固定高度問題可以通過JavaScript/jQuery進行響應。 –

您的高度和寬度爲0.您不適合放入任何文本。它要麼溢出或者你可以設置溢出「隱藏」，但比你不會看到任何東西COS股利有大小爲0

來源

2013-09-25 11:11:52 webduvet

您的DIV是無形的，看在你實際的div嘗試給那個div背景顏色。

[查看演示] http://jsfiddle.net/salwenikhil0724/7qbGX/6/

.triangle { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid blue; 
    background-color:red; 

} 
.triangle p { 
    text-align: center; 
    top: 40px; 
    left: -47px; 
    position: relative; 
    width: 93px; 
    height: 93px; 
    margin: 0px; 
}

來源

2013-09-25 11:29:22

這對於正確顯示文本，需要提到的width屬性如下： -

<div style="width: 10em; word-wrap: break-word;"> 
    Some longer than expected text with antidisestablishmentarianism 
    </div>

對於水平滾動，你可以把溢出-X：把它隱藏起來，親愛的。

來源

2013-09-25 12:12:48 kaushik0033

內容出現在div

回答

相關問題