垂直文本在bootstrap div中浮動

Question

我創建了一段代碼。 在跨度類中，如果跨度文本增加，則mean-head水平增加。 我想將其寬度固定為30個字符。 在該文本之后，轉到新行。

示例文件

<span class="top-head"> Recommended URLs </span>
<div class="c1">   
    <div class="item">
        <div class="image"> 
            <img class="media-object" src="http://deathandtaxesmag.wpengine.netdna-cdn.com/wp-content/uploads/2014/02/Screen-Shot-2014-02-27-at-12.39.17-PM.png" >
        </div>
        <div class="descriptionContainer">
            <span class="main-head"> Mashable - Business </span>
            <span class="min-head">Title of link Title of link Title of link Title of link </span>
            <span class="subcont">
                    <span class="fa fa-retweet"> RT 100+ | </span> 
                    <span class="fa fa-twitter"> Tweet 100+</span> 
            </span>
        </div>  
    </div>  
</div>

Answer 1

為跨度類提供固定的寬度並添加顯示塊

.min-head { width:150px; display:block}

Answer 2

這對您有幫助嗎？

span.min-head {
   display: block;
   font-size: 9px;
   margin-top: 1px;
   max-width: 130px;
   white-space: pre-wrap;
}

在這里檢查小提琴