CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2129623
user2129623

Reputation: 2257

Vertical text floating in bootstrap div

I created piece of code. In span class mean-head increase horizontally if the text of the span increase. I want to fix it's width for like 30 characters. After that text so go to new line.

EXAMPLE FIEDLE

<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>

Upvotes: 0

Views: 146

Answers (2)

Nikesh Ponnen
Nikesh Ponnen

Reputation: 409

Give fixed width for span class and add display block

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

Upvotes: 5

LOTUSMS
LOTUSMS

Reputation: 10260

Will this help you?

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

Check the fiddle HERE

Upvotes: 1

Related Questions