CODEWITHSUNDEEP
htmlcss
VeNaToR
VeNaToR

Reputation: 97

First span text overflows to second

My first span text overflows to the second when first span text is lengthy.How can i move second span downwards if first span text ids lengthy.

Here is my code

 <div class="users-wrapper">    
 <div class="column">
 <a href="#" class="user_thumbnail">
    <img src="<?=base_url()?>/images/1.jpg" width="100px" height="100px">

 </a>
 <span class="name">texttexttexttexttexttexttexttexttexttext</span>
 <span class="job">Developer</span>
 </div>
 </div>

css:

.users-wrapper {
padding: 10px;
min-height: 500px;
width:auto;
height: auto;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

.column {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 23px;
float: left;
width: 33%;
height: 110px;
word-break: break-word;
}

.column .name {
font-size:14px;
font-weight:bold;
line-height:20px;
margin-left:128px;
margin-top:-105px;
padding-right:40px;
position:absolute;
color: #3366CC;
word-wrap:break-word;
}

.column .job {
font-size:13px;
font-weight:normal;
line-height:20px;
margin-left:128px;
margin-top:-87px;
padding-right:40px;
position:absolute;
color: #808080;
}


.user_thumbnail,
.img-user_thumbnail {

height: 110px;
padding: 4px;
margin: 7px;
width: 
line-height: 1.428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
}

.user_thumbnail {
display: block;
}


.user_thumbnail > img,
.img-user_thumbnail {
display: inline-block;
max-width: 100%;
}

a.user_thumbnail:hover,
a.user_thumbnail:focus {
border-color: #428bca;
}

.user_thumbnail > img {
margin-right: auto;
margin-left: auto;
}

.user_thumbnail .caption {
padding: 9px;
color: #333333;
}

The height of the outer class column is fixed and not supposed to be auto scale.Here the string name overflows to the string Developer.How can i solve this?

Thanks

Upvotes: 0

Views: 102

Answers (2)

Karuppaiya karthik
Karuppaiya karthik

Reputation: 73

use the css for second span get downwords .

.user_thumbnail {
  float: left;
}
.name {
  clear: both;
  float: left;
}
.job{
  clear: both;
  float: left;
}

Upvotes: 0

Dhaval Bharadva
Dhaval Bharadva

Reputation: 3083

use css to break the word so its automatically break down the word and does not overflows to another span. 

.name{word-wrap:break-word;}

Upvotes: 1

Related Questions