0 
<div class='jfmfs-friend' id='123'>
  <input type='checkbox'/>
  <img src='id.jpg'/>
  <div class='friend-name'>Himanshu Yadav</div>
</div>

我想将文本包装在friend-namediv 中。我试过了

div.friend-name  {
    margin-left: 10px;
    white-space: pre-wrap;
}

这是父 div css：

.jfmfs-friend {                
    cursor:pointer;
    display:inline-block;
    float:left;
    height:56px;
    margin:3px;
    padding:4px;
    width:176px;
    border: 1px solid #FFFFFF;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -webkit-user-select:none;
    -moz-user-select:none;

}

.jfmfs-friend div {
    color:#111111;
    font-size:11px;
    overflow:hidden;
    display:inline-block;
}
4

3 回答 3

1

因此，我将您的所有代码添加到以下 jsbin.com 示例中，以说明为什么它不适用于给出的示例。我添加了一个将执行自动换行的案例。你可以在这里查看：http: //jsbin.com/osopid/1和这里的代码http://jsbin.com/osopid/2/edit

  <div class='jfmfs-friend' id='123'>
  <input type='checkbox' click='width()'/>
  <img src='id.jpg'/>
    <!-- 78px demonstrates no wrapping of the following div  -->  
    <div id='restrictedWidth' class='friend-name'>Himanshu Yadav</div>
    <div id='dbg'></div>
  </div>

  <div class='jfmfs-friend' id='123'>
  <input type='checkbox' click='width()'/>
  <img src='id.jpg'/>
    <!-- 164px demonstrates wrapping of the following div -->
    <div id='restrictedWidth2' class='friend-name'>Himanshu Yadav with more text proving that word wrap is working</div>
    <div id='dbg2'></div>
  </div>

注意添加的自动换行：

.jfmfs-friend {                
    cursor:pointer;
    display:inline-block;
    float:left;
    height:56px;
    margin:3px;
    padding:4px;
    width:176px;
    border: 1px solid #FFFFFF;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -webkit-user-select:none;
    -moz-user-select:none;

}

.jfmfs-friend div {
    color:#111111;
    font-size:11px;
    overflow:hidden;
    display:inline-block;
}

div.friend-name  {
    margin-left: 10px;
    white-space: pre-wrap;
    word-wrap: normal;
    border: 1px solid #000000;
}

添加了一些 jquery 来打印宽度，以便我们可以检查项目何时应该换行：

$('#dbg').html('<div>'+$('#restrictedWidth').css('width')+'</div>');

$('#dbg2').html('<div>'+$('#restrictedWidth2').css('width')+'</div>');

我用chrome测试了这一切，你用的是什么浏览器？

于 2013-01-13T03:19:53.663 回答
0

试试这个，虽然你可能想重新考虑高度：

div.friend-name  {
    margin-left: 10px;
    white-space: pre-wrap;
    word-wrap: normal;
}
于 2013-01-13T02:11:04.050 回答
0

查看word-wrapCSS3 中引入的属性。通过使用该break-word值，应该在容器内自动换行文本。

于 2013-01-13T02:07:53.197 回答