如何在HTML div中包含文本

Question

嗨我有一些文字'基本细节'。我希望细节低于基本。

我怎样才能做到这一点。

这是我的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>

感谢您的帮助 饶

Answer 1

如果没有额外的标记，你需要做一些事情......

.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 */
}