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

親のdivcssは次のとおりです。

.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

word-wrapCSS3で導入されたプロパティを確認してください。値を使用することによりbreak-word、コンテナ内のテキストをワードラップする必要があります。

于 2013-01-13T02:07:53.197 に答える
0

高さを再検討することもできますが、これを試してください。

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