Question

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

我想在friend-name div中包装文本。我试过了

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

Answer 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中测试了这一切，您使用的浏览器是什么？

Answer 2

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

Answer 3

试试这个，尽管你可能想重新考虑一下身高：

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

如果它不适合父div宽度，则在子div中自动换行文本

3 个答案: