Question

当第一个跨度文本很长时，我的第一个跨度文本溢出到第二个。如果第一个跨度文本ID很长，我如何向下移动第二个跨度。

这是我的代码

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

外部类列的高度是固定的，不应该是自动缩放。这里字符串名称溢出到字符串Developer.How我可以解决这个问题吗？

由于

Answer 1

使用css打破这个词，所以它会自动分解这个词并且不会溢出到另一个跨度。

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

Answer 2

使用css进行第二次跨度下载。

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

第一个跨度文本溢出到第二个

2 个答案: