如何適合HTML div中的文本

嗨我有一些文本「基本細節」div。我希望細節在基本以下。如何適合HTML div中的文本

我該如何做到這一點。

這裏是我的jsbin https://jsbin.com/dudine/edit?html,css,output

對不起傢伙，我力包括在這裏的任何代碼。

HTML

.textStyle { 
 
    color: white; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font-size: 90%; 
 
    white-space: normal; 
 
} 
 
.left-rounded-corner { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: red; 
 
    line-height: 16px; 
 
    box-sizing: border-box; 
 
    padding-top: 10px; 
 
    border-top-left-radius: 50px; 
 
    border-bottom-left-radius: 50px; 
 
} 
 
/*Allign elements in horizontally*/ 
 
.element_align_horizontally { 
 
    display: inline-block; 
 
}

<div id='statusContainer' class='scrollable'> 
 
    <div class="left-rounded-corner element_align_horizontally textStyle">Basic Details</div> 
 
    <div class="rectangle-shape element_align_horizontally textStyle">two</div> 
 
    <div class="rectangle-shape element_align_horizontally textStyle">three</div> 
 
    <div class="rectangle-shape element_align_horizontally textStyle">Four</div> 
 
    <div class="right-rounded-corner element_align_horizontally textStyle">Five</div> 
 
</div>

感謝您的幫助饒

來源

2016-05-05 BRDroid

問題尋求代碼幫助必須包括笑在問題本身**中重現它所必需的rtest代碼。雖然您提供了[**鏈接到示例或網站**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-如果鏈接變得無效，那麼你的問題對於其他具有相同問題的未來SO用戶將沒有任何價值。 –

'基本
詳細信息' – amphetamachine

你的問題沒有任何意義。即使只有幾行代碼本可以很好地開始你解決神祕的可疑旅程..！：D –

你需要幾件事情要做到這一點，無需額外的標記......

.left-rounded-corner { 
    ... 
    line-height: 16px; 
    box-sizing: border-box; /* include padding and margin in height */ 
    padding-top: 10px; /* move text down a bit */ 
} 
.textStyle { 
    ... 
    font-size: 90%; /* something big enough to force wrap without extra markup */ 
    white-space: normal; /* allow wrapping */ 
}

來源

2016-05-05 13:49:18 isherwood

非常感謝你解決它 – BRDroid

如何適合HTML div中的文本

回答

相關問題